ArcGIS for Developers

SystemTheme QML Type

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

Import Statement: import ArcGIS.AppFramework.Platform 1.0

Properties

Methods

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

Enum describing the different potential system themes. Informs the mode property.

NameValue
SystemTheme.Unknown-1
SystemTheme.Dark0
SystemTheme.Light1
SystemTheme.Custom2

Property Documentation

[read-only] mode : SystemThemeType

Property containing the current system theme mode. This property is informed by the SystemThemeType enum.


[read-only] palette : object

Property containing the color palette for the theme.


Method Documentation

setAndSignalThemeChange(systemTheme)

Sets a new system theme, before signalling a change in the system theme.

The systemTheme parameter

The system theme to change to.