Use Case - Style And Theme Support

Styling with QML involves creating a visual type and binding that to a property or by directly assigning a value to a property. For types that incorporate Qt Quick's delegates the visual type attaches to the delegate property.

When using Qt Quick Controls 1, the controls automatically set the appropriate style from the respective platforms.

Using the Styling QML Types

The controls have a style property to which the styling types bind. The controls have a corresponding styling type from the Qt Quick Controls 1 Styles module. For example, Button has a ButtonStyle type and Menu has a MenuStyle type. The styling types provide properties applicable to their respective controls such as the background, label, or for some controls, the cursor appearance.

Button {
    text: qsTr("Hello World")
    style: ButtonStyle {
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "#FFF"
            radius: 4
            gradient: Gradient {
                GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#fff" }
                GradientStop { position: 1 ; color: control.pressed ? "#000" : "#fff" }
            }
        }
   }

Note: Qt Quick Controls 1 Styles was introduced in Qt 5.1 and requires Qt Quick 2.1.

Accessing the System Palette

The SystemPalette type provides information about the system's palette information. QML applications can use this information to set the appearance of visual types to match the native look-and-feel. In addition, on desktop platforms, different color palettes are employed when changing states, for example, when the application loses keyboard focus.

When using the controls, the system colors are already used.

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