refactor(quickshell): centralize bar theme values

This commit is contained in:
2026-09-25 17:30:44 -04:00
parent 1a9d6a6a78
commit 73f74fe05f
8 changed files with 133 additions and 96 deletions
+1 -1
View File
@@ -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 => {
+25 -25
View File
@@ -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
+7 -7
View File
@@ -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
}
}
+49 -48
View File
@@ -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
}
}
}
+1 -1
View File
@@ -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 => {
@@ -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
}
}
@@ -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 {
+36
View File
@@ -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
}