CustomTheme QML Type

Defines a named custom theme. More...

• 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.