Change text color for QML controls

Question

I am using some QML controls like GroupBox and CheckBox which have text associated with them. The default color of the text is black. However, I have these items on a dark background and would prefer using white for the text color. These items don't have a color property so I'm not sure what to do.

CheckBox {
    text: "Check Me"
}

luffy · Answer 1 · 2015-01-20T07:42:17.697

7

I had the same problem with GroupBox so I wanted to post an answer for future reference. The problem can easily be fixed using HTML formatting. For instance to change the color:

GroupBox{ 
    title: "<font color=\"white\">my title</font>"
}

Size and other formatting parameters can be changed the same way.

edited Jan 20 '15 at 07:42

answered Jan 19 '15 at 20:38

luffy

2,246
3
22
28

thanks for showing the possibility to use html in qml – Ahmed Fwela Sep 08 '18 at 07:13

score 4 · Answer 2 · answered Aug 27 '13 at 20:54

4

Have you tried setting it as an entire sub-element of the checkbox?

CheckBox {

    Text {
        text: "Check Me"
        color: "red"
    }
}

answered Aug 27 '13 at 20:54

Calum Murray

1,102
3
12
20

score 3 · Accepted Answer · edited Aug 06 '15 at 18:00

3

You need to use the style property to redefine the Component to use for the label based on the CheckBoxStyle

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

Rectangle {
    color: "black"
    CheckBox {
        style: CheckBoxStyle {
            label: Text {
                color: "white"
                text: "check Me"
            }
        }
    }
}

When using CheckBoxStyle you might have to redefine the whole component and not just the label property.

edited Aug 06 '15 at 18:00

BaCaRoZzo

7,502
6
51
82

answered Aug 27 '13 at 22:07

koopajah

23,792
9
78
104

Unfortunately, this doesn't seem to work. CheckBoxStyle is underlined like it can't find it and I did provide the imports (but compiles fine). The only thing that changed is now I can't see the checkbox label at all. – roundtheworld Aug 28 '13 at 12:15
I just upgraded to Qt Creator 2.8.1 and while CheckBoxStyle is no longer underlined, the text still does not appear white. Also, I did notice I lost a lot of other style elements with the above code. The checkbox now has a grey square in it opposed to an actual check when clicked. – roundtheworld Aug 28 '13 at 12:47
1

@user1595510 I updated my answer by moving the text property in the label component. I did not have Qt to try it on yesterday. On my version of Qt (5.1.0) it sets the text as white – koopajah Aug 28 '13 at 12:58
1

That did work! Two things remain though. Firstly, by using the style tag, it seems to overwrite all the style elements, so I lose the checkmark and get a grey square instead when selected. Secondly, there doesn't seem to be a `GroupBoxStyle` class...is it possible to modify the text color of a `GroupBox`? – roundtheworld Aug 28 '13 at 13:13
@user1595510 As I said you might have to redefine the whole style of your element if you want to change the text color and then create your own component for the indicator too (the checkmark) as shown in the documentation. As for GroupBox I did not find a way to change the text color for now. When using the `CheckBoxStyle` you see the proper style for your platform and it is based on the square inside the indicator – koopajah Aug 28 '13 at 13:37
Check out the documentation, where they consistently redefine the whole style, copying the existing style as the basis for the new style. Controls 1.0: https://doc.qt.io/qt-5/qtquickcontrolsstyles-index.html. Controls 2.0: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html. – Edward LeBlanc Dec 16 '20 at 10:08

Change text color for QML controls

3 Answers3

Linked