SystemTheme QML Type

Allows control over the app's theme and color palette. More...

• List of all members, including inherited members

Properties

• mode : SystemThemeType
• palette : object

Methods

• setAndSignalThemeChange(string systemTheme)

Detailed Description

The SystemTheme component is used to contain the visual theme being used for the device so that it can be used within the app, e.g. light and dark mode. This component cannot be instantated by itself, and must be initially instantiated using the SystemTheme property in the Platform singleton.

The following code sample shows an example usage of SystemTheme. A SystemTheme object contains the information on the system theme, which is then used for a number of example controls within the app.

App {
    id: app
    width: 400
    height: 640

    property bool useMaterial : true

    Material.theme: useMaterial ? ((Platform.systemTheme.mode === SystemTheme.Dark) ? Material.Dark : Material.Light) : Material.Light
    SystemPalette {
        id: myPalette
        colorGroup: SystemPalette.Active

        onWindowChanged: {
            console.error("Window color active changed.color: ", window);

        }

        onTextChanged: {
            console.error("Text color active changed. color: ", text);
        }

        onWindowTextChanged: {
            console.error("Window text color active changed. color: ", windowText);

        }

        onButtonChanged: {
            console.error("Button color active changed. color: ", button);
        }
    }

    Connections {
        target: Platform
        onSystemThemeChanged: {
            console.error("ThemeChanged current: ", Platform.systemTheme.mode);

            if (useMaterial) {
                if (Platform.systemTheme.mode === SystemTheme.Dark) {
                    app.Material.theme = Material.Dark;
                } else if (Platform.systemTheme.mode === SystemTheme.Light) {
                    app.Material.theme = Material.Light;
                }
            }
        }
    }

    ColumnLayout {

        anchors.fill: parent
        Button {
            width: 100
            height: 30
            text: "Button"
        }

        Rectangle {
            width: parent.width
            height: parent.height / 2
            color: useMaterial ? Material.background : Platform.systemTheme.palette["window"]


            ColumnLayout {
                spacing: 5
                anchors.fill: parent
                Text {
                    text: "Hello!"
                    color: useMaterial ? Material.foreground : Platform.systemTheme.palette["text"]
                }

                ColumnLayout {
                    RadioButton
                    {
                        id: rb1
                        text: qsTr("Small")
                        contentItem: Text {
                                text: rb1.text
                                color: useMaterial ? Material.foreground : Platform.systemTheme.palette["text"]
                                leftPadding: rb1.indicator.width + rb1.spacing
                                verticalAlignment: Text.AlignVCenter
                            }
                    }
                    RadioButton
                    {
                        id: rb2
                        text: qsTr("Medium")
                        checked: true
                        contentItem: Text {
                                text: rb2.text
                                color: useMaterial ? Material.foreground : Platform.systemTheme.palette["text"]
                                leftPadding: rb2.indicator.width + rb2.spacing
                                verticalAlignment: Text.AlignVCenter
                            }
                    }
                    RadioButton
                    {
                        id: rb3
                        text: qsTr("Large")
                        contentItem: Text {
                                text: rb3.text
                                color: useMaterial ? Material.foreground : Platform.systemTheme.palette["text"]
                                leftPadding: rb3.indicator.width + rb3.spacing
                                verticalAlignment: Text.AlignVCenter
                            }
                    }
                }
            }
        }

        Rectangle {

            width: parent.width
            height: parent.height / 2
            color: useMaterial ? Material.background : Platform.systemTheme.palette["window"]

            ColumnLayout {
                anchors.fill: parent
                spacing: 5

                RowLayout {
                    Text {
                        Layout.preferredWidth: 100
                        height: 30
                        text: "Text :"
                        color: useMaterial ? Material.foreground : Platform.systemTheme.palette["text"]
                    }

                    TextField {
                        placeholderText: "Enter text"
                        placeholderTextColor: useMaterial ? Material.foreground : Platform.systemTheme.palette["text"]
                        Layout.preferredWidth: 100
                        height: 30
                    }

                }

                RowLayout {
                    Text {
                        Layout.preferredWidth: 100
                        height: 30
                        text: "Slider 1"
                        color: useMaterial ? Material.foreground : Platform.systemTheme.palette["text"]
                    }

                    Slider {
                        from: 1
                        value: 25
                        to: 100

                    }
                }
            }

        }

    }
}

On macOS, this can only function if the app's appinfo.json has the macos.allowDarkMode property set to true.

Enumerations

SystemThemeType enumeration

Property Documentation

Method Documentation