// Copyright (C) 2025 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only // Qt-Security score:significant reason:default import QtQuick import Qt.labs.StyleKit import Qt.labs.StyleKit.impl 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 fillWidth: true fillHeight: true 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 } } 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 { fillWidth: true fillHeight: true 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 { spacing: 0 handle.width: 15 handle.height: 15 background.visible: false indicator { width: 60 height: 60 radius: 255 foreground { fillWidth: true fillHeight: true width: 6 height: 6 delegate: DialDelegate {} } } } 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 } toolButton { background.width: 40 background.height: 40 indicator { color: __transparent border.width: 0 width: 14 alignment: Qt.AlignRight | Qt.AlignVCenter foreground { fillWidth: false fillHeight: false 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" } } } 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 } hovered.background.color: __backgroundDefault } label { background.visible: false } menu { background { width: 200 height: 20 } } menuBar { padding: 1 spacing: 0 background { height: 20 radius: 0 border.width: 0 color: __backgroundDefault } } menuBarItem { text.alignment: Qt.AlignLeft | Qt.AlignVCenter background { width: 20 height: 20 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: 0 background { width: 188 height: 1 color: "transparent" border.width: 0 } indicator { height: 1 fillWidth: true 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 { width: 12 height: 12 radius: 0 } indicator { width: 12 height: 12 fillWidth: true radius: 0 foreground { fillWidth: true fillHeight: true radius: 0 color: __backgroundMuted } } vertical { indicator { fillWidth: false fillHeight: true } } hovered { indicator.foreground.color: __backgroundSubtle } } scrollIndicator { background { width: 6 height: 6 visible: false } indicator { width: 6 height: 6 fillWidth: true radius: 255 border.width: 0 foreground { fillWidth: true fillHeight: true margins: 0 radius: 255 color: __backgroundMuted } } vertical { indicator { fillWidth: false fillHeight: true } } } 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 delegate: ProgressDelegate {} } } vertical { // Manually transpose the sizes background { width: 40 height: 150 } indicator { fillWidth: false fillHeight: true width: 8 alignment: Qt.AlignHCenter } } } spinBox { text.alignment: Qt.AlignHCenter | Qt.AlignVCenter indicator { fillHeight: true border.width: 0 margins: 0 color: __transparent foreground { width: 10 height: 10 color: __transparent image.color: __textDefault image.fillMode: Image.PreserveAspectFit image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png" 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 { visible: false fillWidth: true fillHeight: true radius: style.indicatorSize / 2 color: palette.accent } } checked.indicator.foreground.visible: true } 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 padding: 2 vertical.background.width: 40 } toolSeparator { padding: 2 background.visible: false indicator { width: 30 height: 1 border.width: 0 color: __strokeMuted foreground.visible: false } vertical { indicator { width: 1 height: 30 alignment: Qt.AlignHCenter } } } toolTip { text.padding: 2 background { width: 20 height: 20 color: __baseWhite } } tumbler { background { height: 200 width: 60 color: __transparent border.width: 0 } } }