CustomTheme QML Type

Defines a named custom theme. More...

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

• List of all members, including inherited members

Properties

• name : string
• theme : Component

Detailed Description

CustomTheme lets you add additional themes beyond light and dark. While the light and dark themes are applied automatically based on the operating system's color scheme, a CustomTheme must be activated explicitly by the application. Apart from this difference, all themes work the same way.

You can define any number of custom themes inside a Style.

Style {
    CustomTheme {
        name: "HighContrast"
        theme: Theme {
            control.background.color: "white"
            control.background.border.color: "black"
            control.background.border.width: 2
        }
    }

    CustomTheme {
        name: "Sepia"
        theme: Theme {
            control.text.color: "#5b4636"
            control.background.color: "#f4ecd8"
            control.background.border.color: "#c8b99a"
            applicationWindow.background.color: "#efe6d0"
        }
    }
}

To activate a CustomTheme, set Style::themeName to its name from the application:

ComboBox {
    model: StyleKit.style.themeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

You can also set a CustomTheme as the default theme at start-up:

ApplicationWindow {
    width: 1024
    height: 800
    visible: true

    StyleKit.style: MyStyleKitStyle {
        themeName: "HighContrast"
    }
}

The custom themes defined in a Style can be queried at runtime from Style::customThemeNames or Style::themeNames.

See also Theme, Style::themeName, and Style::customThemeNames.

Property Documentation

name : string

The name of this theme. This is the value you assign to Style::themeName to activate it.

theme : Component

The Theme component that defines the theme. It will only be instantiated when the theme is activated.

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