AquaMorph/dotfiles
1
0
Fork 0
mirror of https://github.com/AquaMorph/dotfiles.git synced 2026-09-29 20:04:21 +00:00
Code Issues Projects Releases Wiki Activity

refactor(quickshell): centralize bar theme values

Browse Source
This commit is contained in:
AquaMorph
2026-09-25 17:30:44 -04:00
parent 1a9d6a6a78
commit 73f74fe05f
8 changed files with 133 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
home/dot_config/quickshell/bar/Backlight.qml
+1 -1
View File
@@ -6,7 +6,7 @@ Block {
required property var service required property var service
visible: service.brightness >= 0 visible: service.brightness >= 0
blockColor: "#2980b9" blockColor: Theme.secondary
interactive: true interactive: true
text: "\uf185 " + service.brightness + "%" text: "\uf185 " + service.brightness + "%"
onWheel: wheel => { onWheel: wheel => {
home/dot_config/quickshell/bar/Bar.qml
+25 -25
View File
@@ -26,8 +26,8 @@ PanelWindow {
left: true left: true
right: true right: true
} }
implicitHeight: 38 implicitHeight: Theme.barHeight
color: "#80000000" color: Theme.background
PwObjectTracker { PwObjectTracker {
objects: [bar.sink, bar.source] objects: [bar.sink, bar.source]
@@ -54,7 +54,7 @@ PanelWindow {
top: parent.top top: parent.top
bottom: parent.bottom bottom: parent.bottom
} }
spacing: 8 spacing: Theme.moduleSpacing
Row { Row {
height: parent.height height: parent.height
@@ -70,10 +70,10 @@ PanelWindow {
property bool active: modelData.active property bool active: modelData.active
visible: modelData.id > 0 visible: modelData.id > 0
width: 34 width: Theme.blockHeight + 2
height: parent.height height: parent.height
color: modelData.urgent ? "#e91e63" color: modelData.urgent ? Theme.urgent
: active ? "#0288d1" : "transparent" : active ? Theme.primary : "transparent"
Rectangle { Rectangle {
anchors { anchors {
@@ -81,17 +81,17 @@ PanelWindow {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
height: 3 height: Theme.activeLineWidth
color: workspaceButton.active ? "#b3e5fc" : "transparent" color: workspaceButton.active ? Theme.accent : "transparent"
} }
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: modelData.id === 2 ? "\uf120" text: modelData.id === 2 ? "\uf120"
: modelData.id === 13 ? "\uf001" : modelData.name : modelData.id === 13 ? "\uf001" : modelData.name
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Font Awesome 6 Free" font.family: Theme.iconFontFamily
font.pixelSize: 18 font.pixelSize: Theme.fontSize
} }
MouseArea { MouseArea {
@@ -111,13 +111,13 @@ PanelWindow {
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.max(0, Math.min(implicitWidth, 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 elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: Hyprland.activeToplevel ? Hyprland.activeToplevel.title : "" text: Hyprland.activeToplevel ? Hyprland.activeToplevel.title : ""
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 18 font.pixelSize: Theme.fontSize
} }
Row { Row {
@@ -126,16 +126,16 @@ PanelWindow {
right: parent.right right: parent.right
top: parent.top top: parent.top
bottom: parent.bottom bottom: parent.bottom
rightMargin: 4 rightMargin: Theme.moduleSpacing / 2
} }
spacing: 8 spacing: Theme.moduleSpacing
Block { Block {
id: audioBlock id: audioBlock
blockColor: bar.sink && bar.sink.audio && bar.sink.audio.muted 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 textColor: bar.sink && bar.sink.audio && bar.sink.audio.muted
? "#000000" : "#ffffff" ? Theme.foregroundDark : Theme.foreground
interactive: true interactive: true
text: { text: {
if (!bar.sink || !bar.sink.audio) if (!bar.sink || !bar.sink.audio)
@@ -182,9 +182,9 @@ PanelWindow {
visible: bar.battery.ready && bar.battery.isLaptopBattery visible: bar.battery.ready && bar.battery.isLaptopBattery
interactive: true interactive: true
blockColor: percentage <= 15 && UPower.onBattery blockColor: percentage <= 15 && UPower.onBattery
? "#e91e63" : UPower.onBattery ? "#ffffff" : "#2980b9" ? Theme.urgent : UPower.onBattery ? Theme.foreground : Theme.secondary
textColor: UPower.onBattery && percentage > 15 textColor: UPower.onBattery && percentage > 15
? "#000000" : "#ffffff" ? Theme.foregroundDark : Theme.foreground
text: { text: {
if (!UPower.onBattery) if (!UPower.onBattery)
return "\uf1e6 " + percentage + "%"; return "\uf1e6 " + percentage + "%";
@@ -199,14 +199,14 @@ PanelWindow {
Rectangle { Rectangle {
visible: trayRepeater.count > 0 visible: trayRepeater.count > 0
implicitWidth: trayItems.implicitWidth + 20 implicitWidth: trayItems.implicitWidth + Theme.contentPadding * 2
implicitHeight: 32 implicitHeight: Theme.blockHeight
color: "#0288d1" color: Theme.primary
Row { Row {
id: trayItems id: trayItems
anchors.centerIn: parent anchors.centerIn: parent
spacing: 10 spacing: Theme.contentPadding
Repeater { Repeater {
id: trayRepeater id: trayRepeater
home/dot_config/quickshell/bar/Block.qml
+7 -7
View File
@@ -4,19 +4,19 @@ import Quickshell.Widgets
Rectangle { Rectangle {
id: root id: root
property color blockColor: "#0288d1" property color blockColor: Theme.primary
property color textColor: "#ffffff" property color textColor: Theme.foreground
property bool interactive: false property bool interactive: false
property string text: "" property string text: ""
property string fontFamily: "SF Pro Display, Font Awesome 6 Free" property string fontFamily: Theme.iconFontFamily
property string secondaryIcon: "" property string secondaryIcon: ""
property string secondaryText: "" property string secondaryText: ""
signal clicked(var mouse) signal clicked(var mouse)
signal doubleClicked(var mouse) signal doubleClicked(var mouse)
signal wheel(var wheel) signal wheel(var wheel)
implicitWidth: content.implicitWidth + 20 implicitWidth: content.implicitWidth + Theme.contentPadding * 2
implicitHeight: 32 implicitHeight: Theme.blockHeight
color: blockColor color: blockColor
Row { Row {
@@ -28,7 +28,7 @@ Rectangle {
text: root.text text: root.text
color: root.textColor color: root.textColor
font.family: root.fontFamily font.family: root.fontFamily
font.pixelSize: 18 font.pixelSize: Theme.fontSize
} }
IconImage { IconImage {
@@ -45,7 +45,7 @@ Rectangle {
text: root.secondaryText text: root.secondaryText
color: root.textColor color: root.textColor
font.family: root.fontFamily font.family: root.fontFamily
font.pixelSize: 18 font.pixelSize: Theme.fontSize
} }
} }
home/dot_config/quickshell/bar/DetailPopup.qml
+49 -48
View File
@@ -47,8 +47,9 @@ PopupWindow {
} }
visible: false visible: false
implicitWidth: 320 implicitWidth: Theme.popupWidth
implicitHeight: contentLoader.item ? contentLoader.item.implicitHeight + 32 : 100 implicitHeight: contentLoader.item
? contentLoader.item.implicitHeight + Theme.popupPadding * 2 : 100
color: "transparent" color: "transparent"
anchor { anchor {
@@ -60,7 +61,7 @@ PopupWindow {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: "#e0000000" color: Theme.popupBackground
Loader { Loader {
id: contentLoader id: contentLoader
@@ -68,7 +69,7 @@ PopupWindow {
left: parent.left left: parent.left
right: parent.right right: parent.right
top: parent.top top: parent.top
margins: 12 margins: Theme.popupPadding
} }
sourceComponent: root.page === "clock" ? clockPage sourceComponent: root.page === "clock" ? clockPage
: root.page === "audio" ? audioPage : root.page === "audio" ? audioPage
@@ -82,8 +83,8 @@ PopupWindow {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
height: 3 height: Theme.activeLineWidth
color: "#b3e5fc" color: Theme.accent
} }
} }
@@ -98,7 +99,7 @@ PopupWindow {
property int firstDay: new Date(year, month, 1).getDay() property int firstDay: new Date(year, month, 1).getDay()
property int days: new Date(year, month + 1, 0).getDate() property int days: new Date(year, month + 1, 0).getDate()
implicitWidth: 288 implicitWidth: Theme.popupContentWidth
implicitHeight: 310 implicitHeight: 310
PopupHeader { PopupHeader {
@@ -113,9 +114,9 @@ PopupWindow {
topMargin: 40 topMargin: 40
} }
text: Qt.formatDateTime(parent.now, "h:mm:ss AP") text: Qt.formatDateTime(parent.now, "h:mm:ss AP")
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 30 font.pixelSize: Theme.fontClock
} }
Row { Row {
@@ -132,8 +133,8 @@ PopupWindow {
required property string modelData required property string modelData
width: 37 width: 37
text: modelData text: modelData
color: "#7aa6da" color: Theme.muted
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.bold: true font.bold: true
} }
@@ -160,7 +161,7 @@ PopupWindow {
width: 37 width: 37
height: 29 height: 29
radius: 0 radius: 0
color: today ? "#0288d1" : "transparent" color: today ? Theme.primary : "transparent"
Rectangle { Rectangle {
anchors { anchors {
@@ -168,18 +169,18 @@ PopupWindow {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
height: 3 height: Theme.activeLineWidth
visible: parent.today visible: parent.today
color: "#b3e5fc" color: Theme.accent
} }
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: parent.day > 0 && parent.day <= clockContent.days text: parent.day > 0 && parent.day <= clockContent.days
? parent.day : "" ? parent.day : ""
color: parent.today ? "#ffffff" : "#cfd8dc" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: Theme.fontSmall
} }
} }
} }
@@ -191,7 +192,7 @@ PopupWindow {
id: audioPage id: audioPage
Column { Column {
width: 288 width: Theme.popupContentWidth
spacing: 12 spacing: 12
PopupHeader { PopupHeader {
@@ -235,7 +236,7 @@ PopupWindow {
id: networkPage id: networkPage
Column { Column {
width: 288 width: Theme.popupContentWidth
spacing: 10 spacing: 10
PopupHeader { PopupHeader {
@@ -245,9 +246,9 @@ PopupWindow {
Text { Text {
text: "Connected to " + root.hardware.connection text: "Connected to " + root.hardware.connection
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 15 font.pixelSize: Theme.fontBody
} }
Column { Column {
@@ -263,7 +264,7 @@ PopupWindow {
width: networks.width width: networks.width
height: 29 height: 29
radius: 0 radius: 0
color: modelData.active ? "#0288d1" : "#80000000" color: modelData.active ? Theme.primary : Theme.background
Rectangle { Rectangle {
anchors { anchors {
@@ -271,9 +272,9 @@ PopupWindow {
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
height: 3 height: Theme.activeLineWidth
visible: parent.modelData.active visible: parent.modelData.active
color: "#b3e5fc" color: Theme.accent
} }
Text { Text {
@@ -285,9 +286,9 @@ PopupWindow {
width: parent.width - 70 width: parent.width - 70
elide: Text.ElideRight elide: Text.ElideRight
text: modelData.ssid text: modelData.ssid
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: Theme.fontSmall
} }
Text { Text {
@@ -297,9 +298,9 @@ PopupWindow {
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
text: modelData.signal + "%" text: modelData.signal + "%"
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 13 font.pixelSize: Theme.fontCaption
} }
} }
} }
@@ -309,14 +310,14 @@ PopupWindow {
width: parent.width width: parent.width
height: 30 height: 30
radius: 0 radius: 0
color: "#0288d1" color: Theme.primary
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: "Open network settings" text: "Open network settings"
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 13 font.pixelSize: Theme.fontCaption
} }
MouseArea { MouseArea {
@@ -332,7 +333,7 @@ PopupWindow {
id: batteryPage id: batteryPage
Column { Column {
width: 288 width: Theme.popupContentWidth
spacing: 12 spacing: 12
PopupHeader { PopupHeader {
@@ -343,22 +344,22 @@ PopupWindow {
Text { Text {
text: Math.round(root.battery.percentage * 100) + "% " text: Math.round(root.battery.percentage * 100) + "% "
+ root.batteryState() + root.batteryState()
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 25 font.pixelSize: Theme.fontDisplay
} }
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 8 height: 8
radius: 0 radius: 0
color: "#40000000" color: Theme.track
Rectangle { Rectangle {
width: parent.width * root.battery.percentage width: parent.width * root.battery.percentage
height: parent.height height: parent.height
radius: 0 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 text: UPower.onBattery
? "Remaining: " + root.duration(root.battery.timeToEmpty) ? "Remaining: " + root.duration(root.battery.timeToEmpty)
: "Until full: " + root.duration(root.battery.timeToFull) : "Until full: " + root.duration(root.battery.timeToFull)
color: "#b3e5fc" color: Theme.accent
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 15 font.pixelSize: Theme.fontBody
} }
Text { Text {
@@ -376,9 +377,9 @@ PopupWindow {
+ (root.battery.healthSupported + (root.battery.healthSupported
? " Health: " + Math.round(root.battery.healthPercentage * 100) + "%" ? " Health: " + Math.round(root.battery.healthPercentage * 100) + "%"
: "") : "")
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: Theme.fontSmall
} }
} }
} }
home/dot_config/quickshell/bar/Network.qml
+1 -1
View File
@@ -8,7 +8,7 @@ Block {
property bool connected: service.connection !== "Disconnected" property bool connected: service.connection !== "Disconnected"
signal detailsRequested(var anchorItem) signal detailsRequested(var anchorItem)
blockColor: connected ? "#2980b9" : "#e91e63" blockColor: connected ? Theme.secondary : Theme.urgent
interactive: true interactive: true
text: connected ? "\uf1eb " + service.connection : "Disconnected !" text: connected ? "\uf1eb " + service.connection : "Disconnected !"
onClicked: mouse => { onClicked: mouse => {
home/dot_config/quickshell/bar/PopupHeader.qml
+6 -6
View File
@@ -5,19 +5,19 @@ Rectangle {
property string text: "" property string text: ""
implicitHeight: 32 implicitHeight: Theme.blockHeight
color: "#0288d1" color: Theme.primary
Text { Text {
anchors { anchors {
left: parent.left left: parent.left
leftMargin: 10 leftMargin: Theme.contentPadding
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
text: root.text text: root.text
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 18 font.pixelSize: Theme.fontSize
font.bold: true font.bold: true
} }
} }
home/dot_config/quickshell/bar/PopupSlider.qml
+8 -8
View File
@@ -15,9 +15,9 @@ Item {
Text { Text {
anchors.left: parent.left anchors.left: parent.left
text: root.label text: root.label
color: "#ffffff" color: Theme.foreground
font.family: "SF Pro Display, Helvetica, Arial, sans-serif" font.family: Theme.fontFamily
font.pixelSize: 15 font.pixelSize: Theme.fontBody
} }
Rectangle { Rectangle {
@@ -28,13 +28,13 @@ Item {
width: 58 width: 58
height: 24 height: 24
radius: 0 radius: 0
color: root.muted ? "#e91e63" : "#0288d1" color: root.muted ? Theme.urgent : Theme.primary
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: root.muted ? "MUTED" : Math.round(root.value * 100) + "%" text: root.muted ? "MUTED" : Math.round(root.value * 100) + "%"
color: "#ffffff" color: Theme.foreground
font.pixelSize: 11 font.pixelSize: Theme.fontTiny
font.bold: true font.bold: true
} }
@@ -54,13 +54,13 @@ Item {
} }
height: 8 height: 8
radius: 0 radius: 0
color: "#40000000" color: Theme.track
Rectangle { Rectangle {
width: Math.min(parent.width, parent.width * root.value / 1.5) width: Math.min(parent.width, parent.width * root.value / 1.5)
height: parent.height height: parent.height
radius: 0 radius: 0
color: root.muted ? "#e91e63" : "#0288d1" color: root.muted ? Theme.urgent : Theme.primary
} }
MouseArea { MouseArea {
home/dot_config/quickshell/bar/Theme.qml
+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
}