Search code examples
qtqtquick2qtquickcontrols2

qml change button foregrouns color with Qt controls 2.0


I am trying to use the QtQuick.Controls 2.0 module as it gives better performance for my raspberry pi based app. One thing that I am unable to figure out is how to change the foreground text colour in a button!

So, I can change the background as follows:

 Button {
        id: testButton
        width: 80
        height: 30
        enabled: false
        text: "Test"

        background: Rectangle {
            color: testButton.enabled ? "steelblue" : "gray"
        }
    }

This works but I have combed the dos here (https://doc.qt.io/qt-5/qml-qtquick-controls2-button-members.html) and I see no way how to change the foreground color!


Solution

  • Controls 2 were not really intended to be styled on a per-object basis. They go hand in hand with the available GUI styles, therefore offering uniform visual style across different components.

    Depending on which style you select, you have some options to specify certain colors globally for the theme, or on a per-object basis:

    Material.foreground: Material.Red // globally
    // or
    Button {
        Material.foreground: Material.Red // per object
    }
    

    The default style has no options, it is simple and plain black and white for optimal performance. The universal style gives you the ability to set background, foreground and accent colors, the material style also gives you an additional primary color.

    See here for more details.