Theme QML Type

Defines color and style overrides for a color scheme. More...

Import Statement:	`import Qt.labs.StyleKit`
Inherits:	AbstractStyle
Status:	Technology preview

This type is in technology preview and is subject to change.

List of all members, including inherited members

Detailed Description

A Theme overrides properties defined in a Style to provide a distinct visual appearance for a particular color scheme. A style typically configures structural properties such as implicit size, padding, and radii, while a theme specifies colors, shadows, and other visual attributes. However, this is not a restriction — a theme can override any property that a style can set.

A style can provide a light and a dark theme. When themeName is set to "System" (the default), the active theme follows the operating system's color scheme. You can also create additional themes using CustomTheme and switch between them at runtime.

Properties that are not set in the theme fall back to those defined in the Style.

The following example defines light, dark, and high-contrast themes, each providing different colors for the controls:

Style {
    light: Theme {
        control {
            text.color: "#202020"
            background.color: "#f0f0f0"
            background.border.color: "#d0d0d0"
            background.shadow.color: "#c0c0c0"
            hovered.background.color: "#e0e0e0"
        }
        applicationWindow.background.color: "gainsboro"
        button.hovered.background.color: "#4a90d9"
        radioButton.indicator.foreground.color: "#d0d0d0"
        switchControl.indicator.foreground.color: "lightslategray"
        switchControl.handle.color: "white"
    }

    dark: Theme {
        control {
            text.color: "#e0e0e0"
            background.color: "#404040"
            background.border.color: "#606060"
            background.shadow.color: "#222222"
            hovered.background.color: "#505050"
        }
        applicationWindow.background.color: "#2b2b2b"
        button.hovered.background.color: "#6ab0f9"
        radioButton.indicator.foreground.color: "#606060"
        switchControl.indicator.foreground.color: "#505050"
        switchControl.handle.color: "#808080"
    }

    CustomTheme {
        name: "HighContrast"
        theme: Theme {
            control {
                text.color: "black"
                text.bold: true
                background.color: "white"
                background.border.color: "black"
                background.border.width: 3
                background.shadow.visible: false
                hovered.background.border.width: 5
            }
            applicationWindow.background.color: "white"
            itemDelegate.hovered.text.color: "white"
            itemDelegate.hovered.background.color: "black"
            itemDelegate.background.border.width: 0
            button.hovered.background.color: "black"
            button.hovered.text.color: "white"
            radioButton.indicator.foreground.color: "white"
            radioButton.checked.indicator.foreground.color: "black"
            switchControl.indicator.foreground.color: "white"
            switchControl.handle.color: "white"
            switchControl.handle.border.color: "black"
            switchControl.handle.border.width: 2
            switchControl.checked.handle.color: "black"
        }
    }
}

For a complete example showing themes in action, see the StyleKit Example.

Note: Types in Qt.labs modules are not guaranteed to remain compatible in future versions.

See also Style and CustomTheme.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.