Reference Fallback Style | Qt Labs StyleKit | Qt 6.11.2
Description: A reference fallback style

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

# Reference Fallback Style

The following listing shows a fallback style similar to the one that StyleKit uses when a fallbackStyle is not explicitly set. It provides a basic appearance similar to the Basic style, and serves as the baseline for any properties not overridden by your style or its active theme.

Note: This listing may not reflect the exact fallback style shipped with the latest version of Qt. It is intended to illustrate how the controls are styled by default, which can be helpful when styling your own controls on top.

     import QtQuick
     import Qt.labs.StyleKit

     BaseStyle {
         id: style

         /* Properties and Controls left unspecified in a Style will be read from Style.fallbackStyle
          * instead (that is, this file, unless the fallback style is changed). Here we can give the
          * properties some sensible defaults. */

         /* Assign sensible light-theme colors to the controls. We intentionally avoid
          * binding to the OS palette (except for the accent color) because the fallback
          * style should provide a stable baseline for other styles and remain identical
          * and consistent across all platforms. Instead, it is the style developer’s
          * responsibility to bind individual colors to the palette if desired, and to
          * define separate themes for light and dark mode. */

         readonly property color __baseBlack: "black"
         readonly property color __baseWhite: "white"
         readonly property color __backgroundDefault: Qt.darker(__baseWhite, 1.1)
         readonly property color __backgroundMuted: Qt.darker(__baseWhite, 1.2)
         readonly property color __backgroundSubtle: Qt.darker(__baseWhite, 1.3)
         readonly property color __strokeStrong: Qt.darker(__baseWhite, 1.6)
         readonly property color __strokeMuted: Qt.darker(__baseWhite, 1.4)
         readonly property color __textDefault: Qt.darker(__baseWhite, 1.9)
         readonly property color __textSubtle: Qt.darker(__baseWhite, 1.6)
         readonly property color __transparent: "transparent"

         readonly property real indicatorSize: 24

         applicationWindow {
             background.color: __baseWhite
         }

         control {
             spacing: 5
             padding: 5

             background {
                 radius: 2
                 implicitWidth: 100
                 implicitHeight: 40
                 border.width: 1
                 color: __backgroundDefault
                 border.color: __strokeStrong
             }

             indicator {
                 implicitWidth: style.indicatorSize
                 implicitHeight: style.indicatorSize
                 border.width: 1
                 color: __baseWhite
                 border.color: __strokeStrong
                 foreground {
                     implicitWidth: Style.Stretch
                     implicitHeight: Style.Stretch
                     margins: 1
                     color: palette.accent
                     image.color: palette.accent
                     /* Note: don't set implicit size here, since the DelegateContainer will (and should)
                      * fall back to use the size of the image if not set. So if we hard-code a size here,
                      * it cannot be unset to be the size of the image (if any) again from the Style. */
                 }
             }

             text {
                 color: __baseBlack
             }

             handle {
                 implicitWidth: style.indicatorSize
                 implicitHeight: style.indicatorSize
                 radius: style.indicatorSize / 2
                 border.width: 1
                 color: __backgroundDefault
                 border.color: __strokeStrong
             }

             checked {
                 background.color: __backgroundSubtle
             }

             hovered {
                 background.color: __backgroundMuted
                 handle.color: __backgroundMuted
             }

             disabled {
                 background.color: __baseWhite
                 text.color: __textSubtle
             }
         }

         checkBox {
             background.visible: false
             indicator {
                 foreground {
                     color: __transparent
                     visible: false
                     image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
                 }
             }
             text {
                 alignment: Qt.AlignVCenter | Qt.AlignLeft
             }
             checked {
                 indicator.foreground.visible: true
             }
         }

         comboBox {
             text.alignment: Qt.AlignVCenter
             background.implicitWidth: 150
             indicator {
                 color: __transparent
                 border.width: 0
                 foreground {
                     implicitWidth: 10
                     implicitHeight: 10
                     alignment: Qt.AlignCenter
                     color: __transparent
                     image.color: __textDefault
                     image.fillMode: Image.PreserveAspectFit
                     image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/drop-indicator.png"
                 }
             }
         }

         flatButton {
             background.visible: false
             hovered.background.visible: true
         }

         frame {
             background.color: Qt.darker(__baseWhite, 1.05)
         }

         groupBox {
             text.padding: 12
             padding: 12
             background.implicitHeight: 20
         }

         itemDelegate {
             text.alignment: Qt.AlignVCenter | Qt.AlignLeft
             background {
                 // Make it flat
                 radius: 0
                 color: __baseWhite
                 border.width: 0
                 shadow.visible: false
             }
             hovered.background.color: __backgroundDefault
         }

         label {
             background.visible: false
         }

         page {
             background.border.width: 0
         }

         pane {
             background {
                 implicitWidth: 200
                 implicitHeight: 200
                 color: __baseWhite
             }
         }

         popup {
             background {
                 implicitWidth: 200
                 implicitHeight: 200
                 border.width: 1
             }
         }

         progressBar {
             background.visible: false
             indicator.implicitWidth: 150
         }

         radioButton {
             background.visible: false
             indicator {
                 radius: 255
                 foreground {
                     margins: 4
                     visible: false
                     radius: 255
                 }
             }
             text.alignment: Qt.AlignVCenter | Qt.AlignLeft
             checked.indicator.foreground.visible: true
         }

         scrollBar {
             padding: 0
             background {
                 implicitHeight: 10
                 visible: false
             }
             indicator {
                 implicitHeight: 10
                 radius: 255
                 foreground.radius: 255
                 foreground.color: __backgroundDefault
             }
             vertical {
                 background.implicitWidth: 10
                 indicator.implicitWidth: 10
             }
             hovered {
                 indicator.foreground.color: __backgroundMuted
             }
         }

         scrollIndicator {
             background {
                 implicitHeight: 6
                 visible: false
             }
             indicator {
                 border.width: 0
                 implicitHeight: 6
                 radius: 255
                 foreground {
                     margins: 0
                     radius: 255
                     color: __backgroundDefault
                 }
             }
             vertical {
                 background.implicitWidth: 6
                 indicator.implicitWidth: 6
             }
         }

         slider {
             background {
                 visible: false
                 implicitWidth: 150
             }
             indicator {
                 implicitWidth: Style.Stretch
                 implicitHeight: 8
                 radius: 8
                 foreground {
                     radius: 7
                 }
             }
         }

         spinBox {
             text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             indicator {
                 implicitHeight: Style.Stretch
                 border.width: 0
                 margins: 0
                 color: __transparent
                 foreground {
                     color: __transparent
                     image.color: __textDefault
                     image.fillMode: Image.PreserveAspectFit
                     image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"

                     // Note: by setting a rotation, we cannot at the same time set the implicit size to
                     // Stretch, since Stretch will be based on the unrotated geometry of the indicator.
                     // So if the height of the indicator is different from the width, things will look wrong.
                     implicitWidth: 10
                     implicitHeight: 10
                     alignment: Qt.AlignCenter
                 }
                 down {
                     alignment: Qt.AlignLeft
                     foreground.rotation: 90
                 }
                 up {
                     alignment: Qt.AlignRight
                     foreground.rotation: -90
                 }
             }
         }

         switchControl {
             background.visible: false
             text.alignment: Qt.AlignVCenter
             indicator {
                 implicitWidth: style.indicatorSize * 2
                 implicitHeight: style.indicatorSize
                 alignment: Qt.AlignLeft | Qt.AlignVCenter
                 radius: style.indicatorSize / 2
                 foreground {
                     radius: style.indicatorSize / 2
                     color: __transparent
                 }
             }
             checked {
                 indicator.foreground.color: palette.accent
             }
         }

         tabBar {
             padding: 0
             spacing: -1 // let tabButtons overlap slightly
         }

         tabButton {
             background {
                 radius: 0
                 topLeftRadius: 2
                 topRightRadius: 2
             }
         }

         textField {
             text.alignment: Qt.AlignVCenter
             background {
                 implicitWidth: 150
                 gradient: null
             }
         }

         textInput {
             padding: 5
             background {
                 implicitWidth: 150
                 implicitHeight: 40
                 border.width: 1
                 color: __baseWhite
             }
             text {
                 color: __baseBlack
             }
         }

         toolBar {
             background.implicitHeight: 40
         }

         toolSeparator {
             padding: 2
             background.visible: false
             indicator {
                 implicitWidth: 30
                 implicitHeight: 1
                 border.width: 0
                 color: __strokeMuted
                 foreground.visible: false
             }
         }
     }

See also Style.fallbackStyle.