- Qt 6.11
- Qt Labs StyleKit
- QML Types
- Style
- Qt 6.11.1 Reference Documentation

# Style QML Type

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

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

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

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

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

## 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 and themeName.

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

### 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 and themeName.

### 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

Note: Themes are local to the Style where they are defined, and can only be set as the current theme for that style. For the current theme to take effect, the style it belongs to must also be the current style in the application.

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.