From 73f74fe05f897f0f0511f9cde0747c4fbd1ebe41 Mon Sep 17 00:00:00 2001 From: Christian Colglazier Date: Fri, 25 Sep 2026 17:30:44 -0400 Subject: [PATCH] refactor(quickshell): centralize bar theme values --- home/dot_config/quickshell/bar/Backlight.qml | 2 +- home/dot_config/quickshell/bar/Bar.qml | 50 +++++----- home/dot_config/quickshell/bar/Block.qml | 14 +-- .../dot_config/quickshell/bar/DetailPopup.qml | 97 ++++++++++--------- home/dot_config/quickshell/bar/Network.qml | 2 +- .../dot_config/quickshell/bar/PopupHeader.qml | 12 +-- .../dot_config/quickshell/bar/PopupSlider.qml | 16 +-- home/dot_config/quickshell/bar/Theme.qml | 36 +++++++ 8 files changed, 133 insertions(+), 96 deletions(-) create mode 100644 home/dot_config/quickshell/bar/Theme.qml diff --git a/home/dot_config/quickshell/bar/Backlight.qml b/home/dot_config/quickshell/bar/Backlight.qml index d222ef9..821c1e6 100644 --- a/home/dot_config/quickshell/bar/Backlight.qml +++ b/home/dot_config/quickshell/bar/Backlight.qml @@ -6,7 +6,7 @@ Block { required property var service visible: service.brightness >= 0 - blockColor: "#2980b9" + blockColor: Theme.secondary interactive: true text: "\uf185 " + service.brightness + "%" onWheel: wheel => { diff --git a/home/dot_config/quickshell/bar/Bar.qml b/home/dot_config/quickshell/bar/Bar.qml index d2c0ef1..38d786c 100644 --- a/home/dot_config/quickshell/bar/Bar.qml +++ b/home/dot_config/quickshell/bar/Bar.qml @@ -26,8 +26,8 @@ PanelWindow { left: true right: true } - implicitHeight: 38 - color: "#80000000" + implicitHeight: Theme.barHeight + color: Theme.background PwObjectTracker { objects: [bar.sink, bar.source] @@ -54,7 +54,7 @@ PanelWindow { top: parent.top bottom: parent.bottom } - spacing: 8 + spacing: Theme.moduleSpacing Row { height: parent.height @@ -70,10 +70,10 @@ PanelWindow { property bool active: modelData.active visible: modelData.id > 0 - width: 34 + width: Theme.blockHeight + 2 height: parent.height - color: modelData.urgent ? "#e91e63" - : active ? "#0288d1" : "transparent" + color: modelData.urgent ? Theme.urgent + : active ? Theme.primary : "transparent" Rectangle { anchors { @@ -81,17 +81,17 @@ PanelWindow { right: parent.right bottom: parent.bottom } - height: 3 - color: workspaceButton.active ? "#b3e5fc" : "transparent" + height: Theme.activeLineWidth + color: workspaceButton.active ? Theme.accent : "transparent" } Text { anchors.centerIn: parent text: modelData.id === 2 ? "\uf120" : modelData.id === 13 ? "\uf001" : modelData.name - color: "#ffffff" - font.family: "SF Pro Display, Font Awesome 6 Free" - font.pixelSize: 18 + color: Theme.foreground + font.family: Theme.iconFontFamily + font.pixelSize: Theme.fontSize } MouseArea { @@ -111,13 +111,13 @@ PanelWindow { Text { anchors.centerIn: parent width: Math.max(0, Math.min(implicitWidth, - parent.width - leftModules.width - rightModules.width - 32)) + parent.width - leftModules.width - rightModules.width - Theme.blockHeight)) elide: Text.ElideRight horizontalAlignment: Text.AlignHCenter text: Hyprland.activeToplevel ? Hyprland.activeToplevel.title : "" - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 18 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontSize } Row { @@ -126,16 +126,16 @@ PanelWindow { right: parent.right top: parent.top bottom: parent.bottom - rightMargin: 4 + rightMargin: Theme.moduleSpacing / 2 } - spacing: 8 + spacing: Theme.moduleSpacing Block { id: audioBlock blockColor: bar.sink && bar.sink.audio && bar.sink.audio.muted - ? "#ffffff" : "#0288d1" + ? Theme.foreground : Theme.primary textColor: bar.sink && bar.sink.audio && bar.sink.audio.muted - ? "#000000" : "#ffffff" + ? Theme.foregroundDark : Theme.foreground interactive: true text: { if (!bar.sink || !bar.sink.audio) @@ -182,9 +182,9 @@ PanelWindow { visible: bar.battery.ready && bar.battery.isLaptopBattery interactive: true blockColor: percentage <= 15 && UPower.onBattery - ? "#e91e63" : UPower.onBattery ? "#ffffff" : "#2980b9" + ? Theme.urgent : UPower.onBattery ? Theme.foreground : Theme.secondary textColor: UPower.onBattery && percentage > 15 - ? "#000000" : "#ffffff" + ? Theme.foregroundDark : Theme.foreground text: { if (!UPower.onBattery) return "\uf1e6 " + percentage + "%"; @@ -199,14 +199,14 @@ PanelWindow { Rectangle { visible: trayRepeater.count > 0 - implicitWidth: trayItems.implicitWidth + 20 - implicitHeight: 32 - color: "#0288d1" + implicitWidth: trayItems.implicitWidth + Theme.contentPadding * 2 + implicitHeight: Theme.blockHeight + color: Theme.primary Row { id: trayItems anchors.centerIn: parent - spacing: 10 + spacing: Theme.contentPadding Repeater { id: trayRepeater diff --git a/home/dot_config/quickshell/bar/Block.qml b/home/dot_config/quickshell/bar/Block.qml index 48ae0b1..df1f366 100644 --- a/home/dot_config/quickshell/bar/Block.qml +++ b/home/dot_config/quickshell/bar/Block.qml @@ -4,19 +4,19 @@ import Quickshell.Widgets Rectangle { id: root - property color blockColor: "#0288d1" - property color textColor: "#ffffff" + property color blockColor: Theme.primary + property color textColor: Theme.foreground property bool interactive: false property string text: "" - property string fontFamily: "SF Pro Display, Font Awesome 6 Free" + property string fontFamily: Theme.iconFontFamily property string secondaryIcon: "" property string secondaryText: "" signal clicked(var mouse) signal doubleClicked(var mouse) signal wheel(var wheel) - implicitWidth: content.implicitWidth + 20 - implicitHeight: 32 + implicitWidth: content.implicitWidth + Theme.contentPadding * 2 + implicitHeight: Theme.blockHeight color: blockColor Row { @@ -28,7 +28,7 @@ Rectangle { text: root.text color: root.textColor font.family: root.fontFamily - font.pixelSize: 18 + font.pixelSize: Theme.fontSize } IconImage { @@ -45,7 +45,7 @@ Rectangle { text: root.secondaryText color: root.textColor font.family: root.fontFamily - font.pixelSize: 18 + font.pixelSize: Theme.fontSize } } diff --git a/home/dot_config/quickshell/bar/DetailPopup.qml b/home/dot_config/quickshell/bar/DetailPopup.qml index aba8816..8e56a98 100644 --- a/home/dot_config/quickshell/bar/DetailPopup.qml +++ b/home/dot_config/quickshell/bar/DetailPopup.qml @@ -47,8 +47,9 @@ PopupWindow { } visible: false - implicitWidth: 320 - implicitHeight: contentLoader.item ? contentLoader.item.implicitHeight + 32 : 100 + implicitWidth: Theme.popupWidth + implicitHeight: contentLoader.item + ? contentLoader.item.implicitHeight + Theme.popupPadding * 2 : 100 color: "transparent" anchor { @@ -60,7 +61,7 @@ PopupWindow { Rectangle { anchors.fill: parent - color: "#e0000000" + color: Theme.popupBackground Loader { id: contentLoader @@ -68,7 +69,7 @@ PopupWindow { left: parent.left right: parent.right top: parent.top - margins: 12 + margins: Theme.popupPadding } sourceComponent: root.page === "clock" ? clockPage : root.page === "audio" ? audioPage @@ -82,8 +83,8 @@ PopupWindow { right: parent.right bottom: parent.bottom } - height: 3 - color: "#b3e5fc" + height: Theme.activeLineWidth + color: Theme.accent } } @@ -98,7 +99,7 @@ PopupWindow { property int firstDay: new Date(year, month, 1).getDay() property int days: new Date(year, month + 1, 0).getDate() - implicitWidth: 288 + implicitWidth: Theme.popupContentWidth implicitHeight: 310 PopupHeader { @@ -113,9 +114,9 @@ PopupWindow { topMargin: 40 } text: Qt.formatDateTime(parent.now, "h:mm:ss AP") - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 30 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontClock } Row { @@ -132,8 +133,8 @@ PopupWindow { required property string modelData width: 37 text: modelData - color: "#7aa6da" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" + color: Theme.muted + font.family: Theme.fontFamily horizontalAlignment: Text.AlignHCenter font.bold: true } @@ -160,7 +161,7 @@ PopupWindow { width: 37 height: 29 radius: 0 - color: today ? "#0288d1" : "transparent" + color: today ? Theme.primary : "transparent" Rectangle { anchors { @@ -168,18 +169,18 @@ PopupWindow { right: parent.right bottom: parent.bottom } - height: 3 + height: Theme.activeLineWidth visible: parent.today - color: "#b3e5fc" + color: Theme.accent } Text { anchors.centerIn: parent text: parent.day > 0 && parent.day <= clockContent.days ? parent.day : "" - color: parent.today ? "#ffffff" : "#cfd8dc" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 14 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontSmall } } } @@ -191,7 +192,7 @@ PopupWindow { id: audioPage Column { - width: 288 + width: Theme.popupContentWidth spacing: 12 PopupHeader { @@ -235,7 +236,7 @@ PopupWindow { id: networkPage Column { - width: 288 + width: Theme.popupContentWidth spacing: 10 PopupHeader { @@ -245,9 +246,9 @@ PopupWindow { Text { text: "Connected to " + root.hardware.connection - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 15 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontBody } Column { @@ -263,7 +264,7 @@ PopupWindow { width: networks.width height: 29 radius: 0 - color: modelData.active ? "#0288d1" : "#80000000" + color: modelData.active ? Theme.primary : Theme.background Rectangle { anchors { @@ -271,9 +272,9 @@ PopupWindow { right: parent.right bottom: parent.bottom } - height: 3 + height: Theme.activeLineWidth visible: parent.modelData.active - color: "#b3e5fc" + color: Theme.accent } Text { @@ -285,9 +286,9 @@ PopupWindow { width: parent.width - 70 elide: Text.ElideRight text: modelData.ssid - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 14 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontSmall } Text { @@ -297,9 +298,9 @@ PopupWindow { verticalCenter: parent.verticalCenter } text: modelData.signal + "%" - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 13 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontCaption } } } @@ -309,14 +310,14 @@ PopupWindow { width: parent.width height: 30 radius: 0 - color: "#0288d1" + color: Theme.primary Text { anchors.centerIn: parent text: "Open network settings" - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 13 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontCaption } MouseArea { @@ -332,7 +333,7 @@ PopupWindow { id: batteryPage Column { - width: 288 + width: Theme.popupContentWidth spacing: 12 PopupHeader { @@ -343,22 +344,22 @@ PopupWindow { Text { text: Math.round(root.battery.percentage * 100) + "% " + root.batteryState() - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 25 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontDisplay } Rectangle { width: parent.width height: 8 radius: 0 - color: "#40000000" + color: Theme.track Rectangle { width: parent.width * root.battery.percentage height: parent.height radius: 0 - color: root.battery.percentage <= 0.15 ? "#e91e63" : "#0288d1" + color: root.battery.percentage <= 0.15 ? Theme.urgent : Theme.primary } } @@ -366,9 +367,9 @@ PopupWindow { text: UPower.onBattery ? "Remaining: " + root.duration(root.battery.timeToEmpty) : "Until full: " + root.duration(root.battery.timeToFull) - color: "#b3e5fc" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 15 + color: Theme.accent + font.family: Theme.fontFamily + font.pixelSize: Theme.fontBody } Text { @@ -376,9 +377,9 @@ PopupWindow { + (root.battery.healthSupported ? " Health: " + Math.round(root.battery.healthPercentage * 100) + "%" : "") - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 14 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontSmall } } } diff --git a/home/dot_config/quickshell/bar/Network.qml b/home/dot_config/quickshell/bar/Network.qml index 0487ff9..2c16603 100644 --- a/home/dot_config/quickshell/bar/Network.qml +++ b/home/dot_config/quickshell/bar/Network.qml @@ -8,7 +8,7 @@ Block { property bool connected: service.connection !== "Disconnected" signal detailsRequested(var anchorItem) - blockColor: connected ? "#2980b9" : "#e91e63" + blockColor: connected ? Theme.secondary : Theme.urgent interactive: true text: connected ? "\uf1eb " + service.connection : "Disconnected !" onClicked: mouse => { diff --git a/home/dot_config/quickshell/bar/PopupHeader.qml b/home/dot_config/quickshell/bar/PopupHeader.qml index e948c90..0dba2e1 100644 --- a/home/dot_config/quickshell/bar/PopupHeader.qml +++ b/home/dot_config/quickshell/bar/PopupHeader.qml @@ -5,19 +5,19 @@ Rectangle { property string text: "" - implicitHeight: 32 - color: "#0288d1" + implicitHeight: Theme.blockHeight + color: Theme.primary Text { anchors { left: parent.left - leftMargin: 10 + leftMargin: Theme.contentPadding verticalCenter: parent.verticalCenter } text: root.text - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 18 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontSize font.bold: true } } diff --git a/home/dot_config/quickshell/bar/PopupSlider.qml b/home/dot_config/quickshell/bar/PopupSlider.qml index 5793d1a..24f9652 100644 --- a/home/dot_config/quickshell/bar/PopupSlider.qml +++ b/home/dot_config/quickshell/bar/PopupSlider.qml @@ -15,9 +15,9 @@ Item { Text { anchors.left: parent.left text: root.label - color: "#ffffff" - font.family: "SF Pro Display, Helvetica, Arial, sans-serif" - font.pixelSize: 15 + color: Theme.foreground + font.family: Theme.fontFamily + font.pixelSize: Theme.fontBody } Rectangle { @@ -28,13 +28,13 @@ Item { width: 58 height: 24 radius: 0 - color: root.muted ? "#e91e63" : "#0288d1" + color: root.muted ? Theme.urgent : Theme.primary Text { anchors.centerIn: parent text: root.muted ? "MUTED" : Math.round(root.value * 100) + "%" - color: "#ffffff" - font.pixelSize: 11 + color: Theme.foreground + font.pixelSize: Theme.fontTiny font.bold: true } @@ -54,13 +54,13 @@ Item { } height: 8 radius: 0 - color: "#40000000" + color: Theme.track Rectangle { width: Math.min(parent.width, parent.width * root.value / 1.5) height: parent.height radius: 0 - color: root.muted ? "#e91e63" : "#0288d1" + color: root.muted ? Theme.urgent : Theme.primary } MouseArea { diff --git a/home/dot_config/quickshell/bar/Theme.qml b/home/dot_config/quickshell/bar/Theme.qml new file mode 100644 index 0000000..87ad37e --- /dev/null +++ b/home/dot_config/quickshell/bar/Theme.qml @@ -0,0 +1,36 @@ +pragma Singleton + +import QtQuick +import Quickshell + +Singleton { + readonly property color background: "#80000000" + readonly property color popupBackground: "#e0000000" + readonly property color primary: "#0288d1" + readonly property color secondary: "#2980b9" + readonly property color accent: "#b3e5fc" + readonly property color urgent: "#e91e63" + readonly property color foreground: "#ffffff" + readonly property color foregroundDark: "#000000" + readonly property color muted: "#7aa6da" + readonly property color track: "#40000000" + + readonly property string fontFamily: "SF Pro Display, Helvetica, Arial, sans-serif" + readonly property string iconFontFamily: "SF Pro Display, Font Awesome 6 Free" + + readonly property int barHeight: 38 + readonly property int blockHeight: 32 + readonly property int fontSize: 18 + readonly property int fontTiny: 11 + readonly property int fontCaption: 13 + readonly property int fontSmall: 14 + readonly property int fontBody: 15 + readonly property int fontDisplay: 25 + readonly property int fontClock: 30 + readonly property int moduleSpacing: 8 + readonly property int contentPadding: 10 + readonly property int activeLineWidth: 3 + readonly property int popupWidth: 320 + readonly property int popupPadding: 12 + readonly property int popupContentWidth: popupWidth - popupPadding * 2 +}