Important: Please read the Qt Code of Conduct -

Setting the color of toolbar

  • Hi

    I am developing a mobile application that uses a toolbar and a "side menu"/ drawer, and i simply need to set the color of these items.

    I have already tried using Material style and Material.primary: "#002855". At first glance, this solved my problem, but it has side effects that alter the appearance of many of my custom components! E.g. some images gets skewed, text-input boxes changes shape, and some text becomes unaligned. This issue appears when i set the style to material. If I revert to the default style, these side-effect-problems goes away, but i remain unable to alter the color of the toolbar...

    I need a way to change the color of the toolbar without making too much changes to the style. Is this possible?

  • I tried it now. Your proposed solution lets me set the color, thank you @Mammamia !

    If anyone else has the same problem, here is what i did next to get the same shadow effect as you get by doing the setstyle("Material")-solution. Use Dropshadow:

       header: ToolBar {
            id: idToolBar
            anchors.left: parent.left
            anchors.right: parent.right
            contentHeight: toolButton.implicitHeight
    //        A solution that works, but gives me some side effects to my program..
    //        Material.primary: "#002855" //"#003877"
            //Alternative solution
            //Set color to the toolbar
            background: Rectangle{
                id: idToolbarColor
                color: JotronStyle.jDarkBlue
                //shadow beneath the toolbar
                DropShadow {
                    anchors.fill: idToolbarColor
                    verticalOffset: 1
                    radius: 8.0
                    samples: 16
                    source: idToolbarColor
                    color: "#80000000"

Log in to reply