Revision control
++ // Copyright (C) 2026 The Qt Company Ltd.
++ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
++
++ //! [1]
++ 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
++
++ control {
++ spacing: 5
++ padding: 5
++
++ background {
++ radius: 2
++ width: 100
++ height: 40
++ border.width: 1
++ color: __backgroundDefault
++ border.color: __strokeStrong
++ }
++
++ indicator {
++ width: style.indicatorSize
++ height: style.indicatorSize
++ border.width: 1
++ color: __baseWhite
++ border.color: __strokeStrong
++ foreground {
++ fillWidth: false
++ fillHeight: false
++ 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 {
++ width: style.indicatorSize
++ height: style.indicatorSize
++ radius: style.indicatorSize / 2
++ border.width: 1
++ color: __backgroundDefault
++ border.color: __strokeStrong
++ }
++
++ checked {
++ background.color: __backgroundSubtle
++ }
++
++ hovered {
++ handle.color: __backgroundMuted
++ }
++
++ disabled {
++ background.color: __baseWhite
++ text.color: __textSubtle
++ }
++ }
++
++ abstractButton {
++ hovered.background.color: __backgroundMuted
++ }
++
++ applicationWindow {
++ background.color: __baseWhite
++ }
++
++ busyIndicator {
++ background {
++ visible: false
++ width: 48
++ height: 48
++ }
++ indicator {
++ fillWidth: true
++ fillHeight: true
++ color: __transparent
++ border.width: 0
++ foreground {
++ radius: 255
++ delegate: BusyIndicatorDelegate { }
++ }
++ }
++ }
++
++ checkBox {
++ background.visible: false
++ indicator {
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ 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
++ }
++ }
++
++ checkDelegate {
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ background {
++ radius: 0
++ color: __baseWhite
++ border.width: 0
++ }
++ indicator {
++ alignment: Qt.AlignRight | Qt.AlignVCenter
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ visible: false
++ alignment: Qt.AlignCenter
++ color: __transparent
++ image.fillMode: Image.PreserveAspectFit
++ image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
++ }
++ }
++ hovered.background.color: __backgroundDefault
++ checked {
++ indicator.foreground.visible: true
++ }
++ }
++
++ comboBox {
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ background.width: 150
++ indicator {
++ color: __transparent
++ border.width: 0
++ alignment: Qt.AlignRight | Qt.AlignVCenter
++ foreground {
++ width: 10
++ height: 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"
++ }
++ }
++ }
++
++ delayButton {
++ indicator {
++ height: 6
++ fillWidth: true
++ border.width: 1
++ alignment: Qt.AlignBottom
++ foreground {
++ margins: 2
++ fillWidth: true
++ fillHeight: true
++ color: palette.accent
++ delegate: ProgressDelegate {}
++ }
++ }
++ }
++
++ dial {
++ padding: 0
++ handle.width: 15
++ handle.height: 15
++ background {
++ width: 60
++ height: 60
++ radius: 255
++ }
++ }
++
++ dialog {
++ text {
++ padding: 12
++ alignment: Qt.AlignVCenter | Qt.AlignLeft
++ }
++ background.color: __baseWhite
++ }
++
++ dialogButtonBox {
++ background {
++ height: 40
++ radius: 0
++ color: __transparent
++ border.width: 0
++ }
++ }
++
++ drawer {
++ background.color: __baseWhite
++ }
++
++ flatButton {
++ background.visible: false
++ hovered.background.visible: true
++ }
++
++ headerViewDelegate {
++ text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
++ text.padding: 5
++ background {
++ border.width: 1
++ color: Qt.darker(__baseWhite, 1.05)
++ }
++ indicator {
++ width: 16
++ height: 16
++ color: __transparent
++ border.width: 0
++ alignment: Qt.AlignRight | Qt.AlignVCenter
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ color: __transparent
++ image.color: __textDefault
++ image.fillMode: Image.PreserveAspectFit
++ }
++ first {
++ foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/sort-ascending.png"
++ }
++ second {
++ foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/sort-descending.png"
++ }
++ }
++
++ vertical {
++ background {
++ border.width: 1
++ color: Qt.darker(__baseWhite, 1.05)
++ }
++ }
++ }
++
++ pane {
++ padding: 12
++ background {
++ width: 200
++ height: 200
++ color: __baseWhite
++ }
++ }
++
++ frame {
++ background.color: Qt.darker(__baseWhite, 1.05)
++ }
++
++ groupBox {
++ background.topMargin: 20
++ background.height: 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
++ }
++
++ menu {
++ background {
++ width: 200
++ height: 40
++ }
++ }
++
++ menuBar {
++ background {
++ radius: 0
++ border.width: 0
++ color: __backgroundDefault
++ }
++ }
++
++ menuBarItem {
++ text.alignment: Qt.AlignLeft | Qt.AlignVCenter
++ background {
++ width: 40
++ height: 40
++ radius: 0
++ color: __transparent
++ border.width: 0
++ }
++ hovered.background.color: __backgroundSubtle
++ }
++
++ menuItem {
++ text.alignment: Qt.AlignLeft | Qt.AlignVCenter
++ background {
++ width: 200
++ radius: 0
++ border.width: 0
++ }
++ indicator {
++ color: __transparent
++ border.width: 0
++ foreground {
++ color: __transparent
++ image.color: __textDefault
++ image.fillMode: Image.PreserveAspectFit
++ alignment: Qt.AlignCenter
++ }
++ first {
++ alignment: Qt.AlignLeft
++ foreground {
++ width: 20
++ height: 20
++ image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
++ }
++ }
++ second {
++ alignment: Qt.AlignRight
++ foreground {
++ width: 10
++ height: 10
++ image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
++ }
++ }
++ }
++ hovered.background.color: __backgroundSubtle
++ }
++
++ menuSeparator {
++ padding: 2
++ background.visible: false
++ indicator {
++ width: 188
++ height: 1
++ border.width: 0
++ color: __strokeMuted
++ foreground.visible: false
++ }
++ }
++
++ page {
++ background.border.width: 0
++ }
++
++ pageIndicator {
++ background.visible: false
++ indicator {
++ width: 5
++ height: 5
++ radius: 255
++ border.width: 0
++ color: __baseBlack
++ opacity: 0.45
++ foreground.visible: false
++ }
++
++ hovered.indicator {
++ width: 6
++ height: 6
++ opacity: 0.7
++ }
++
++ pressed.indicator {
++ width: 4
++ height: 4
++ }
++
++ checked.indicator {
++ width: 7
++ height: 7
++ }
++
++ checked.hovered.indicator {
++ width: 8
++ height: 8
++ opacity: 0.7
++ }
++ }
++
++ popup {
++ background {
++ width: 200
++ height: 200
++ border.width: 1
++ }
++ }
++
++ progressBar {
++ background.visible: false
++ indicator {
++ width: 150
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ delegate: ProgressDelegate {}
++ }
++ }
++ }
++
++ radioButton {
++ background.visible: false
++ indicator {
++ radius: 255
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ margins: 4
++ visible: false
++ radius: 255
++ }
++ }
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ checked.indicator.foreground.visible: true
++ }
++
++ radioDelegate {
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ background {
++ radius: 0
++ color: __baseWhite
++ border.width: 0
++ }
++ indicator {
++ alignment: Qt.AlignRight | Qt.AlignVCenter
++ radius: 255
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ margins: 4
++ visible: false
++ radius: 255
++ }
++ }
++ hovered.background.color: __backgroundDefault
++ checked.indicator.foreground.visible: true
++ }
++
++ roundButton {
++ background.radius: 255
++ text.alignment: Qt.AlignVCenter | Qt.AlignHCenter
++ }
++
++ scrollBar {
++ padding: 0
++ background {
++ height: 10
++ }
++ indicator {
++ height: 10
++ radius: 255
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ radius: 255
++ color: __backgroundDefault
++ }
++ }
++ vertical {
++ background.width: 10
++ indicator.width: 10
++ }
++ hovered {
++ indicator.foreground.color: __backgroundMuted
++ }
++ }
++
++ scrollIndicator {
++ background {
++ height: 6
++ visible: false
++ }
++ indicator {
++ border.width: 0
++ height: 6
++ radius: 255
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ margins: 0
++ radius: 255
++ color: __backgroundDefault
++ }
++ }
++ vertical {
++ background.width: 6
++ indicator.width: 6
++ }
++ }
++
++ searchField {
++ text.padding: 5
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ text.color: __baseBlack
++ background.width: 200
++
++ indicator {
++ fillHeight: true
++ border.width: 0
++ margins: 0
++ color: __transparent
++ foreground {
++ width: 10
++ height: 10
++ alignment: Qt.AlignCenter
++ color: __transparent
++ }
++
++ //search button
++ first {
++ alignment: Qt.AlignLeft
++ image.color: __textDefault
++ image.fillMode: Image.PreserveAspectFit
++ image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/search-magnifier.png"
++ }
++
++ //clear button
++ second {
++ alignment: Qt.AlignRight
++ image.color: __textDefault
++ image.fillMode: Image.PreserveAspectFit
++ image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/close_circle.png"
++ }
++ }
++ }
++
++ slider {
++ background {
++ visible: false
++ width: 150
++ }
++ indicator {
++ fillWidth: true
++ height: 8
++ radius: 8
++ foreground {
++ radius: 7
++ fillWidth: true
++ fillHeight: true
++ }
++ }
++ }
++
++ spinBox {
++ text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
++ indicator {
++ fillHeight: true
++ 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: since we set a rotation here, don't set fillWidth or fillHeight to true, since
++ // the rotation is applied after the layout has been done based on the unrotated geometry
++ // of the indicator. So we use a fixed implicit size instead, and let the layout stretch the
++ // indicator by setting the alignment to AlignCenter. This way, the indicator will be
++ // stretched in both dimensions, but still maintain its aspect ratio due to the image's fillMode
++ // being PreserveAspectFit.
++ width: 10
++ height: 10
++ alignment: Qt.AlignCenter
++ }
++ // up button
++ first {
++ alignment: Qt.AlignRight
++ foreground.rotation: -90
++ }
++ // down button
++ second {
++ alignment: Qt.AlignLeft
++ foreground.rotation: 90
++ }
++ }
++ }
++
++ swipeDelegate {
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ background {
++ radius: 0
++ color: __baseWhite
++ border.width: 0
++ }
++ hovered.background.color: __backgroundDefault
++ }
++
++ switchControl {
++ background.visible: false
++ text.alignment: Qt.AlignVCenter
++ indicator {
++ width: style.indicatorSize * 2
++ height: style.indicatorSize
++ alignment: Qt.AlignLeft | Qt.AlignVCenter
++ radius: style.indicatorSize / 2
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ radius: style.indicatorSize / 2
++ color: __transparent
++ }
++ }
++ checked {
++ indicator.foreground.color: palette.accent
++ }
++ }
++
++ switchDelegate {
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ background {
++ radius: 0
++ color: __baseWhite
++ border.width: 0
++ }
++ indicator {
++ width: style.indicatorSize * 2
++ height: style.indicatorSize
++ alignment: Qt.AlignRight | Qt.AlignVCenter
++ radius: style.indicatorSize / 2
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ radius: style.indicatorSize / 2
++ color: __transparent
++ }
++ }
++ hovered.background.color: __backgroundDefault
++ checked {
++ indicator.foreground.color: palette.accent
++ }
++ }
++
++ tabBar {
++ padding: 0
++ spacing: -1 // let tabButtons overlap slightly
++ }
++
++ tabButton {
++ background {
++ radius: 0
++ topLeftRadius: 2
++ topRightRadius: 2
++ }
++ }
++
++ tableViewDelegate {
++ text.alignment: Qt.AlignVCenter | Qt.AlignLeft
++ background {
++ radius: 0
++ color: __baseWhite
++ border.width: 0
++ }
++ hovered.background.color: __baseWhite
++ highlighted.background.color: __strokeStrong
++ highlighted.hovered.background.color: __strokeStrong
++ focused.background.border.width: 2
++ }
++
++ textField {
++ text.alignment: Qt.AlignVCenter
++ background {
++ width: 150
++ gradient: null
++ }
++ }
++
++ textInput {
++ padding: 5
++ background {
++ width: 150
++ height: 40
++ border.width: 1
++ color: __baseWhite
++ }
++ text {
++ color: __baseBlack
++ }
++ }
++
++ toolBar {
++ background.height: 40
++ }
++
++ toolSeparator {
++ padding: 2
++ background.visible: false
++ indicator {
++ width: 30
++ height: 1
++ border.width: 0
++ color: __strokeMuted
++ foreground.visible: false
++ }
++ }
++
++ toolTip {
++ text.padding: 2
++ background {
++ width: 20
++ height: 20
++ color: __baseWhite
++ }
++ }
++
++ treeViewDelegate {
++ background {
++ radius: 0
++ color: __baseWhite
++ border.width: 0
++ }
++ indicator {
++ width: 18
++ height: 18
++ color: __transparent
++ border.width: 0
++ alignment: Qt.AlignLeft | Qt.AlignVCenter
++ foreground {
++ fillWidth: true
++ fillHeight: true
++ alignment: Qt.AlignCenter
++ rotation: 0
++ color: __transparent
++ image.color: __textDefault
++ image.fillMode: Image.PreserveAspectFit
++ image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
++ }
++ }
++ highlighted.background.color: __strokeStrong
++ highlighted.hovered.background.color: __strokeStrong
++ focused.background.border.width: 2
++ // For TreeViewDelegate, checked means expanded, so rotate the arrow to point down
++ checked.indicator.foreground.rotation: 90
++ }
++
++ tumbler {
++ background {
++ height: 200
++ width: 60
++ color: __transparent
++ border.width: 0
++ }
++ }
++ }
++ //! [1]