Theme QML Type | Qt Labs StyleKit | Qt 6.11.2
Description: Defines color and style overrides for a color scheme.

- Qt 6.11
- Qt Labs StyleKit
- QML Types
- Theme
- Qt 6.11.2 Reference Documentation

# Theme QML Type

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

Import Statement: | `import Qt.labs.StyleKit`
Inherits: | AbstractStyle

- 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, CustomTheme, and StyleKit Property Resolution.