- Qt 6.11
- Qt Labs StyleKit
- Qt 6.11.2 Reference Documentation

# Qt Labs StyleKit

StyleKit is a declarative styling system for Qt Quick Controls, built on top of Qt Quick Templates. It lets you define a complete visual style for all your controls from a single Style object, including support for themes, state-based styling, and transitions. StyleKit handles the underlying template implementation automatically, letting you focus purely on visual aspects such as colors, dimensions, borders, and shadows.

A key strength of StyleKit is its hierarchical property system: set a property once on a base type like abstractButton, and it automatically applies to all button-like controls. Override it where needed for specific controls or states. Changes to your style are instantly reflected across all controls, ensuring consistency while still allowing fine-grained customization.

For controls that need custom behavior beyond what StyleKit provides, you can still implement custom templates and integrate them seamlessly alongside StyleKit-styled controls.

## Key Features

- Declarative Styling - An easy-to-use QML API that lets you focus on design over implementation
- Hierarchical Fallbacks - All properties propagate. Set them once, override where needed
- State-Based Styling - Design separate appearances for hovered, pressed, focused, etc.
- Animated Transitions - Define smooth animations between states
- Theme Support - Design light and dark themes, and any number of custom themes
- Variations - Design multiple variations of the same controls
- Palette and Font Integration - Configure control palettes and fonts using QML

The following example shows a minimal example of a Style:

     // 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)
             }
         }
     }

This is how to set the style in your application:

     // Main.qml

     import QtQuick
     import Qt.labs.StyleKit

     ApplicationWindow {
         id: app
         width: 1024
         height: 800
         visible: true

         // Assign the style to be used
         StyleKit.style: PlainStyle {}

         // Controls are used as normal
         Column {
             anchors.fill: parent
             anchors.margins: 10
             spacing: 10

             Button {
                 text: "Button"
             }

             Slider {
                 width: 200
             }
         }
     }

## Using the Module in your Project

The QML types of the module are available through the `QtQuick.labs.StyleKit` import. To use the types, add the following import statement to your .qml file:

     import Qt.labs.StyleKit

## Articles and Guides

- StyleKit Features Overview - A brief introduction to the available styling features
- StyleKit Property Resolution - How StyleKit resolves style property values
- Reference Fallback Style

## Examples

- StyleKit Example - Shows how to style Qt Quick Controls using StyleKit.

## QML Types

AbstractStylableControls | Abstract base type containing the control types that can be styled
AbstractStyle | Abstract base type with properties common to both Style and Theme
BorderStyle | Defines the border style for a delegate
ControlStateStyle | Describes the style of a control in a given state
ControlStyle | Defines the style for a control in the normal state
ControlStyleProperties | Defines the stylable properties for a control
CustomControl | Defines styling for a custom (non-built-in) control
CustomTheme | Defines a named custom theme
DelegateStyle | Defines the visual appearance of an element within a control
HandleStyle | Defines the handle style for controls such as Switch, Slider and RangeSlider
ImageStyle | Defines the image style for a delegate
IndicatorStyle | Defines the style for a control's indicator
ShadowStyle | Defines the drop shadow style for a delegate
Style | Root type for a style definition
StyleAnimation | A convenience type for animating style properties
StyleKit | A singleton for setting and accessing the current style
StyleKitDebug | Traces how style properties are resolved for a control
StyleReader | Reads properties from the active Style for a specific control
StyleVariation | Defines alternative styling for specific controls
StyledItem | Renders a DelegateStyle
SubIndicatorStyle | Defines the style for a sub-indicator delegate
TextStyle | Defines the text style for a control's label
Theme | Defines color and style overrides for a color scheme

## Licenses

Qt Labs StyleKit is available under commercial licenses from The Qt Company. In addition, it is available under the GNU Lesser General Public License, version 3, or the GNU General Public License, version 2. See Qt Licensing for further details.