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.StyleKitArticles and Guides
Examples
- StyleKit Example - Shows how to style Qt Quick Controls using StyleKit.
QML Types
Abstract base type containing the control types that can be styled | |
Abstract base type with properties common to both Style and Theme | |
Defines the border style for a delegate | |
Defines the style for a control in a given state | |
Defines the style for a control in the normal state | |
Defines styling for a custom control type | |
Defines a named custom theme | |
Defines the visual appearance of an element within a control | |
Defines the handle style for controls such as Switch, Slider and RangeSlider | |
Defines the image style for a delegate | |
Defines the style for a control's indicator | |
Defines the drop shadow style for a delegate | |
Root type for a style definition | |
Animates style property changes during state transitions | |
A singleton for setting and accessing the current style | |
Traces how style properties are resolved for a control | |
Provides access to control state and palette for styling | |
Defines alternative styling for specific controls | |
Renders a DelegateStyle | |
Defines the style for a sub-indicator delegate | |
Defines the text style for a control's label | |
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.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
