Style QML Type

The root type for a style definition. More...

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

• List of all members, including inherited members

Properties

• Stretch : int
• customThemeNames : list<string>
• dark : Component
• fallbackStyle : Style
• light : Component
• palette : palette
• theme : Theme
• themeName : string
• themeNames : list<string>

Detailed Description

Style is the root type in StyleKit for defining a complete visual style for Qt Quick Controls. A style lets you customize the appearance of every control type — backgrounds, indicators, handles, text, padding, and more — as well as how controls respond to states such as hovered, pressed, and disabled, including animated transitions between them.

Styles support light and dark color schemes through themes, and you can add any number of custom themes as well. Style variations allow you to define alternative styling that can be applied to specific control instances or entire control types. You can also define custom controls to extend the style beyond the built-in control set.

The following example shows a minimal style that defines some structural properties shared by all themes, with separate light and dark themes for colors:

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

Style {
    control {
        padding: 6
        background {
            radius: 4
            implicitWidth: 100
            implicitHeight: 36
        }
        indicator {
            implicitWidth: 20
            implicitHeight: 20
            border.width: 1
        }
        handle {
            implicitWidth: 20
            implicitHeight: 20
            radius: 10
        }
    }

    button {
        background {
            implicitWidth: 120
            shadow.opacity: 0.6
            shadow.verticalOffset: 2
            shadow.horizontalOffset: 2
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
                GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
            }
        }
        pressed.background.scale: 0.95
    }

    slider {
        indicator.implicitWidth: Style.Stretch
        indicator.implicitHeight: 6
        indicator.radius: 3
    }

    light: Theme {
        applicationWindow {
            background.color: "whitesmoke"
        }
        control {
            text.color: "black"
            background.color: "#e8e8e8"
            background.border.color: "#c0c0c0"
            hovered.background.color: "#d0d0d0"
        }
        button {
            text.color: "white"
            background.color: "cornflowerblue"
            background.shadow.color: "gray"
            hovered.background.color: "royalblue"
        }
    }

    dark: Theme {
        applicationWindow {
            background.color: Qt.darker("gray", 2.0)
        }
        control {
            text.color: "white"
            background.color: "#3a3a3a"
            background.border.color: "#555555"
            hovered.background.color: "#4a4a4a"
        }
        button {
            background.color: "sandybrown"
            background.shadow.color: "black"
            hovered.background.color: Qt.darker("sandybrown", 1.2)
        }
    }
}

For a more complete example, see the StyleKit Example.

See also Theme, CustomTheme, StyleVariation, ControlStyle, DelegateStyle, CustomControl, and Property Resolution.

Property Documentation

Stretch : int [read-only]

A sentinel value that, when assigned to a delegate's implicitWidth or implicitHeight, causes the delegate to fill the available space along that axis. The space available will be constrained by layout properties, such as margins and padding.

For example, to make a slider groove fill out the available width:

slider {
    indicator.implicitWidth: Style.Stretch
    indicator.implicitHeight: 6
}

See also DelegateStyle::implicitWidth and DelegateStyle::implicitHeight.

customThemeNames : list<string> [read-only]

The names of all the custom themes defined in the style. This does not include the built-in themes.

See also themeNames, themeName, and CustomTheme.

dark : Component

The dark theme component. It's instantiated and applied when the system is in dark mode and themeName is "System", or when themeName is explicitly set to "Dark".

dark: Theme {
    control.background.color: "#404040"
    button.hovered.background.color: "#6ab0f9"
}

See also light, themeName, and Theme.

fallbackStyle : Style

The fallback style used to resolve properties that are not explicitly set in this style. When a property is not found in the style or its active theme, StyleKit looks it up in the fallback style.

By default, the fallback style is set to an internal style that provides a basic appearance similar to the Basic style.

You can set this to a custom Style, or to null to disable fallback resolution entirely. Note that setting it to null means starting from a completely clean slate, which requires you to set many more properties than otherwise needed. A reference implementation of a fallback style can be found here.

See also Property Resolution.

light : Component

The light theme component. It's instantiated and applied when the system is in light mode and themeName is "System", or when themeName is explicitly set to "Light".

light: Theme {
    control.background.color: "#f0f0f0"
    button.hovered.background.color: "#4a90d9"
}

See also dark, themeName, and Theme.

palette : palette [read-only]

The palette of the control being styled.

Use this palette to bind colors in the style to the palette of the control being styled. If the application assigns a different palette to a control, the style will adapt, and the control will repaint.

button.background.color: palette.accent
button.text.color: palette.buttonText

See also StyleReader::palette.

theme : Theme [read-only]

The currently active theme instance. It's instantiated from either the light theme component, the dark theme component, or one of the custom themes, depending on themeName.

When resolving a style property, StyleKit first looks for it in this theme (StyleVariations aside). If the property is not found, it falls back to search for it in the Style.

See also themeName, light, and dark.

themeName : string

The name of the currently active theme. The default value is "System", which automatically choose between light or dark depending on the color scheme reported by QStyleHints::colorScheme.

You can set this property to change the current theme of this style.

// Main.qml

StyleKit.style: YourStyleKitStyle {
    // Set a theme different from "System" at start-up
    themeName: "Dark"
}

ComboBox {
    // Let the user select a different theme at run-time
    model: StyleKit.style.themeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

Supported values:

• "System" — follows QStyleHints::colorScheme (default)
• "Light" — forces the light theme
• "Dark" — forces the dark theme
• Any custom theme name

See also themeNames and theme.

themeNames : list<string> [read-only]

The names of all available themes, including "System", "Light", "Dark", and any custom themes.

See also themeName and customThemeNames.