QML: how to get the system assigned text color of a TextField at runtime

Question

I have a desktop Python app with a simple QML UI (PyQt5 and QtQuick 2.2). It runs on Linux / KDE.

Without assigning specific colors to elements such as Label and TextField, KDE assigns appropriate colors based on the desktop theme (e.g., Breeze Light or Beeeze Dark). This works well for almost all elements in the app, and I like the simplicity of this approach.

However, I have defined a list with checkboxes for each list item. For those list items, the text color is not assigned correctly by the operating system as it is for all other elements.

As shown in the code below, for contentItem: Text I have to assign an explicit color or KDE defaults to black for both Breeze Light and Breeze Dark.

Rectangle {
    Layout.row: 2
    Layout.column: 2
    id: comboBox
    width: 150;height: 400
    color: 'transparent'

    DelegateModel {
        id: visualModel
        model: ListModel {
                ListElement { name: "name1"; selected: false }
                ListElement { name: "name2"; selected: false }
        }

        groups: [
            DelegateModelGroup { name: "selected" }
        ]

        delegate: Item {
                            width: parent.width
                            implicitHeight: 34

                            function toggle() { control.toggle() }

                            M2.CheckDelegate {

                                id: control
                                anchors.fill: parent
                                text: model.name

                                highlighted: comboBox.highlightedIndex == index
                                checked: model.selected
                                onCheckedChanged: model.selected = checked,
                                model.selected = checked,
                                (checked) ? cb_user.text +=
                                model.name + ' ' : cb_user.text =
                                cb_user.text.replace
                                (model.name + ' ', '')
                                contentItem: Text {
                                    text: control.text
                                    font: control.font
                                    opacity: enabled ? 1.0 : 0.3
                                    color: 'white'
                                    elide: Text.ElideRight
                                    verticalAlignment: Text.AlignVCenter
                                }

                            }
                        }
    }

    ListView {
        anchors.fill: parent
        model: visualModel
    }
}

My goal is to keep this app very simple. I would prefer not to use theming. Since everything else "just works" I would like to know if there is a way to assign the color of contentItem: Text based on the color of other TextFields or Labels in the app, for which the operating system correctly assigns colors for each theme.

The app has an element, for example, with id: title and it receives an appropriate color when a color is not explicitly defined in my QML.

But at runtime, title.color is undefined according to this code:

ApplicationWindow {
    Component.onCompleted: {
            console.log( "title.color: " + title.color )
    }

If I could get that color at runtime and assign it to my inappropriately colored text, that might be my solution.

I hope to find a way to automatically assign the color that the operating system assigns to the other text.

MountainX MountainX · Accepted Answer · 2020-01-11T02:47:31

The solution I used is SystemPalette.

I added this to the ApplicationWindow:

SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
property color system_text_color: myPalette.text

Then I simply assigned that property to my text:

color: system_text_color

QML: how to get the system assigned text color of a TextField at runtime

1 Answers