refactor(quickshell): move every color and font into a Theme singleton

The shell was running two unrelated palettes: an amber one (#FFD063 accent,
#EEEEEE text, #0F1012 panels) hardcoded as ~200 raw hex literals across the
launchers, sidebar, systray, vitals and notifications, and an orange one
(#e8722a) that only the dense bar had, tokenized as per-file properties.

This unifies on the ORANGE values under the AMBER naming scheme, and moves the
lot into widgets/theme/Theme.qml. `surface` takes the dense bar's void
(#0a0a0a) rather than the old panel background. Zero color and font literals
remain anywhere under widgets/ outside Theme.qml.

Collisions resolved, all near-duplicates that wanted to be one token:
  - #0F1012 + #0A0A0C + #0a0a0a -> surface
  - #EEEEEE + #dedede           -> text
  - #7A7B7D + #858585           -> muted
  - #292C30 + #22262C           -> raised
  - #FFD063 + #e8722a           -> accent

Two derived things rather than literals. accentSoft (the pale flash the
top/bottom bars show while a launcher is open) was a hand-picked #FFF3C0
against amber, which is simply wrong against orange; it is now
Qt.tint(accent, white 55%), a ratio checked against the original (amber tinted
55% gives #FFE9B8 vs the hand-picked #FFF3C0). And the dense bar had been
hand-encoding Qt.rgba(0.87,0.87,0.87,a) and Qt.rgba(0.91,0.45,0.16,a), which
are just text and accent at alpha -- now textAlpha(a)/accentAlpha(a), so they
track a palette change instead of silently drifting.

Fonts came along too. Digital-7 Mono is dropped for DepartureMono: it was
never packaged, relying on a manual ~/.dots/fonts/digital_7 install that does
not exist on terra, so `fc-match "Digital-7 Mono"` resolved to DejaVu Sans and
all 38 of those sites -- the launcher lists, sidebar clock, systray labels,
every vitals readout -- were silently rendering in a PROPORTIONAL fallback.
Numeric columns should visibly improve. readoutFont is an alias of displayFont
rather than a second literal so the two roles cannot drift apart.

quickshell/CLAUDE.md updated: it said "No shared theme/tokens file yet" and
told contributors to grep for the existing hex color, which would now
reintroduce exactly what this removes.

Verified: no file references Theme. without the import, none imports it
unused, and the whole shell -- launchers, sidebar, vitals, systray,
notifications, not just the harness -- hot-reloaded clean on terra.
tests/HeadlessSmoke.qml deliberately keeps its own copies; its value is having
no dependencies.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SgcWkm3t6BDQktYHQvb8Hx

.gitignore

@@ -14,3 +14,6 @@ keys.txt
 
 # local env (PATH etc.)
 .env
+
+# local visual-verification output
+.artifacts/

dotfiles/quickshell/CLAUDE.md

@@ -33,8 +33,13 @@ Quickshell hot-reloads QML on file save when already running, so for most edits
 - `widgets/layout/` — `HorizontalStack`/`VerticalStack`: `RowLayout`/`ColumnLayout` wrappers that expose `default property alias content` for terser call sites, with a trailing filler `Item` that soaks up remaining space.
 - `assets/` — SVG icons referenced via `file://${Quickshell.shellDir}/assets/...`.
 
-**Styling**: No shared theme/tokens file yet — colors (`#FFD063` accent, `#0F1012`/`#292C30` backgrounds, `#EEEEEE` text) and metrics are hardcoded per-component. When touching visuals, grep for the existing hex color across `widgets/` to keep new elements consistent rather than introducing new values.
+**Styling**: All colors and font families come from the `Theme` singleton
+(`widgets/theme/Theme.qml`, `import qs.widgets.theme`) — there are no color or
+font literals left anywhere under `widgets/`. Add a token there rather than
+hardcoding a value; alpha variants of the two main colors go through
+`Theme.textAlpha(a)` / `Theme.accentAlpha(a)` instead of a hand-written
+`Qt.rgba(...)`. Metrics (sizes, spacing) are still per-component.
 
 **Component base pattern**: `BarWidget.qml` (`widgets/bar/modules/BarWidget.qml`) is a `WrapperMouseArea` + `WrapperRectangle` combo providing hover-triggered border highlight (`Behavior on border.color` animation) and `Layout.fillWidth`. Bar modules extend it via `default property alias content` rather than duplicating the hover/border chrome.
 
-**Fonts**: Clock/Date use the `Digital-7 Mono` font family — expected to be installed system-wide (see sibling `~/.dots/fonts/digital_7`), not bundled in this repo.
+**Fonts**: Two families, both via `Theme`. `Theme.displayFont` / `Theme.readoutFont` (an alias of it) are `DepartureMono Nerd Font`, installed by `services/desktop/desktop-apps.nix`; `Theme.microFont` is `DejaVu Sans Mono`. The shell no longer uses `Digital-7 Mono`, which was never packaged and depended on a manual `~/.dots/fonts/digital_7` install.

dotfiles/quickshell/shell.qml

@@ -10,6 +10,9 @@ import qs.widgets.systray
 import qs.widgets.vitals
 
 Scope {
+    // Dense multi-monitor status rail; visual core is headlessly renderable.
+    DenseBar {}
+
     // Left sidebar in the Slant (V6) style — toggle with SUPER CTRL S.
     SideBar {}
     BarBottom {}

dotfiles/quickshell/tests/DenseBarHeadless.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import qs.widgets.bar
+
+DenseBarContent {
+    width: 1920
+    height: 164
+
+    now: new Date(2026, 7, 27, 21, 47, 0)
+    hostName: "TERRA"
+    telemetryReady: true
+    ratesReady: true
+    cpuFraction: 0.62
+    cpuThreads: 16
+    memoryFraction: 0.78
+    memoryUsedText: "24.9G"
+    temperatureCelsius: 54
+    networkInterface: "enp7s0"
+    networkRxText: "842.6M/S"
+    networkTxText: "116.2M/S"
+    storageFraction: 0.69
+    storageFreeText: "1.82T FREE"
+    workspaceIds: [1, 2, 3, 4]
+    activeWorkspaceId: 1
+    trayCount: 3
+    audioFraction: 0.50
+    audioMuted: false
+}

dotfiles/quickshell/tests/HeadlessSmoke.qml

@@ -0,0 +1,155 @@
+import QtQuick
+import QtQuick.Shapes
+
+Item {
+    id: root
+
+    implicitWidth: 720
+    implicitHeight: 120
+
+    readonly property color voidColor: "#0a0a0a"
+    readonly property color inkColor: "#dedede"
+    readonly property color mutedColor: "#858585"
+    readonly property color accentColor: "#e8722a"
+
+    Rectangle {
+        anchors.fill: parent
+        color: root.voidColor
+    }
+
+    Shape {
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+
+        ShapePath {
+            fillColor: root.voidColor
+            strokeColor: Qt.rgba(0.87, 0.87, 0.87, 0.28)
+            strokeWidth: 1
+            startX: 1
+            startY: 1
+            PathLine { x: root.width - 14; y: 1 }
+            PathLine { x: root.width - 1; y: 14 }
+            PathLine { x: root.width - 1; y: root.height - 9 }
+            PathLine { x: root.width - 9; y: root.height - 1 }
+            PathLine { x: 17; y: root.height - 1 }
+            PathLine { x: 1; y: root.height - 17 }
+            PathLine { x: 1; y: 1 }
+        }
+
+        ShapePath {
+            fillColor: root.accentColor
+            strokeWidth: 0
+            startX: 1
+            startY: 1
+            PathLine { x: 92; y: 1 }
+            PathLine { x: 92; y: 3 }
+            PathLine { x: 1; y: 3 }
+            PathLine { x: 1; y: 1 }
+        }
+    }
+
+    Rectangle {
+        x: 14
+        y: 12
+        width: 29
+        height: 14
+        color: root.accentColor
+
+        Text {
+            anchors.centerIn: parent
+            text: "001"
+            color: root.voidColor
+            font.pixelSize: 8
+            font.bold: true
+        }
+    }
+
+    Text {
+        x: 52
+        y: 13
+        text: "HEADLESS RENDER ARRAY"
+        color: root.inkColor
+        font.family: "monospace"
+        font.pixelSize: 9
+        font.bold: true
+        font.letterSpacing: 1.4
+    }
+
+    Rectangle {
+        x: 14
+        y: 34
+        width: root.width - 28
+        height: 1
+        color: root.inkColor
+        opacity: 0.18
+    }
+
+    Text {
+        x: 16
+        y: 48
+        text: "ORBITAL"
+        color: root.inkColor
+        font.family: "sans-serif-condensed"
+        font.pixelSize: 28
+        font.bold: true
+        font.letterSpacing: 2
+    }
+
+    Text {
+        x: 18
+        y: 80
+        text: "QML // GRABTOIMAGE // SOFTWARE RHI"
+        color: root.accentColor
+        font.family: "monospace"
+        font.pixelSize: 7
+        font.letterSpacing: 1.4
+    }
+
+    Row {
+        x: 250
+        y: 56
+        spacing: 4
+
+        Repeater {
+            model: 16
+
+            Rectangle {
+                required property int index
+                width: 20
+                height: 12
+                color: index < 11 ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.06)
+                border.width: 1
+                border.color: index < 11 ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.2)
+            }
+        }
+    }
+
+    Text {
+        x: 250
+        y: 78
+        text: "RENDER PIPELINE"
+        color: root.mutedColor
+        font.family: "monospace"
+        font.pixelSize: 7
+        font.letterSpacing: 1.1
+    }
+
+    Text {
+        x: 585
+        y: 77
+        text: "68.75%"
+        color: root.inkColor
+        font.family: "monospace"
+        font.pixelSize: 15
+        font.bold: true
+    }
+
+    Rectangle {
+        x: 14
+        y: root.height - 9
+        width: root.width - 28
+        height: 3
+        color: root.accentColor
+        opacity: 0.6
+    }
+}

dotfiles/quickshell/widgets/bar/BarBottom.qml

@@ -6,6 +6,7 @@ import QtQuick
 import QtQuick.Layouts
 
 import qs.widgets.launcher
+import qs.widgets.theme
 
 Scope {
     id: root
@@ -42,7 +43,7 @@ Scope {
                     implicitHeight: 12
 
                     // Brightens when the Dock launcher (variant 5) opens.
-                    color: LauncherState.dockOpen ? "#FFF3C0" : "#FFD063"
+                    color: LauncherState.dockOpen ? Theme.accentSoft : Theme.accent
 
                     Behavior on color {
                         ColorAnimation {
@@ -53,7 +54,7 @@ Scope {
                     // Gentle "listening" pulse while the dock is open.
                     Rectangle {
                         anchors.fill: parent
-                        color: "#FFFFFF"
+                        color: Theme.highlight
                         opacity: 0
                         visible: LauncherState.dockOpen
 

dotfiles/quickshell/widgets/bar/BarTop.qml

@@ -5,6 +5,7 @@ import Quickshell.Widgets
 import QtQuick
 
 import qs.widgets.launcher
+import qs.widgets.theme
 
 Scope {
     id: root
@@ -42,7 +43,7 @@ Scope {
                     implicitHeight: 6
 
                     // Brightens when the Console launcher (variant 4) opens.
-                    color: LauncherState.consoleOpen ? "#FFF3C0" : "#FFD063"
+                    color: LauncherState.consoleOpen ? Theme.accentSoft : Theme.accent
 
                     Behavior on color {
                         ColorAnimation {
@@ -53,7 +54,7 @@ Scope {
                     // Gentle "listening" pulse while the console is open.
                     Rectangle {
                         anchors.fill: parent
-                        color: "#FFFFFF"
+                        color: Theme.highlight
                         opacity: 0
                         visible: LauncherState.consoleOpen
 

dotfiles/quickshell/widgets/bar/DenseBar.qml

@@ -0,0 +1,86 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.Pipewire
+import Quickshell.Services.SystemTray
+import QtQuick
+import qs.widgets.vitals
+
+// Production/layer-shell adapter. All visual composition lives in the
+// Item-rooted DenseBarContent so the exact bar can be rendered headlessly.
+Scope {
+    id: root
+
+    readonly property PwNode sink: Pipewire.defaultAudioSink
+    readonly property real volume: sink?.audio?.volume ?? 0
+    readonly property bool muted: sink?.audio?.muted ?? false
+
+    readonly property var workspaceIds: Hyprland.workspaces.values
+        .filter(workspace => workspace.id > 0)
+        .map(workspace => workspace.id)
+    readonly property int activeWorkspaceId: Hyprland.focusedWorkspace?.id ?? 1
+    readonly property var rootDisk: vitals.disks.length > 0 ? vitals.disks[0] : null
+
+    PwObjectTracker {
+        objects: [root.sink]
+    }
+
+    VitalsData {
+        id: vitals
+        active: true
+    }
+
+    Variants {
+        model: Quickshell.screens
+
+        PanelWindow {
+            id: window
+
+            required property var modelData
+            screen: modelData
+            color: "transparent"
+            implicitHeight: 164
+
+            anchors {
+                top: true
+                left: true
+                right: true
+            }
+
+            DenseBarContent {
+                anchors.fill: parent
+
+                hostName: vitals.host || "LOCAL"
+                telemetryReady: vitals.ready && !vitals.failed
+                ratesReady: vitals.ratesReady && !vitals.failed
+                cpuFraction: vitals.cpu
+                cpuThreads: vitals.cpuThreads
+                memoryFraction: vitals.memTotal > 0 ? vitals.memUsed / vitals.memTotal : 0
+                memoryUsedText: vitals.fmtBytes(vitals.memUsed)
+                temperatureCelsius: vitals.cpuTemp
+                networkInterface: vitals.netIface || "NET"
+                networkRxText: vitals.fmtRate(vitals.netRx)
+                networkTxText: vitals.fmtRate(vitals.netTx)
+                storageFraction: root.rootDisk && root.rootDisk.size > 0
+                    ? root.rootDisk.used / root.rootDisk.size : 0
+                storageFreeText: root.rootDisk
+                    ? vitals.fmtBytes(root.rootDisk.size - root.rootDisk.used) + " FREE"
+                    : "-- FREE"
+                workspaceIds: root.workspaceIds.length > 0 ? root.workspaceIds : [1, 2, 3, 4]
+                activeWorkspaceId: root.activeWorkspaceId
+                trayCount: SystemTray.items.values.length
+                audioFraction: Math.max(0, Math.min(1, root.volume))
+                audioMuted: root.muted
+
+                onWorkspaceActivated: workspaceId => {
+                    const workspace = Hyprland.workspaces.values.find(item => item.id === workspaceId);
+                    if (workspace)
+                        workspace.activate();
+                    else
+                        Hyprland.dispatch("workspace " + workspaceId);
+                }
+            }
+        }
+    }
+}

dotfiles/quickshell/widgets/bar/DenseBarContent.qml

@@ -0,0 +1,690 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Shapes
+import qs.widgets.theme
+
+// Renderable visual core for the desktop telemetry rail. Runtime services stay
+// in DenseBar.qml so this Item can be exercised without Wayland or Hyprland.
+Item {
+    id: root
+
+    implicitWidth: 1920
+    implicitHeight: 164
+
+    readonly property bool compact: width <= 1400
+
+    property bool autoClock: true
+    property date now: new Date()
+    property string hostName: "LOCAL"
+    property bool telemetryReady: false
+    property bool ratesReady: false
+    property real cpuFraction: 0
+    property int cpuThreads: 0
+    property real memoryFraction: 0
+    property string memoryUsedText: "--"
+    property real temperatureCelsius: NaN
+    property string networkInterface: "NET"
+    property string networkRxText: "--"
+    property string networkTxText: "--"
+    property real storageFraction: 0
+    property string storageFreeText: "-- FREE"
+    property var workspaceIds: [1, 2, 3, 4]
+    property int activeWorkspaceId: 1
+    property int trayCount: 0
+    property real audioFraction: 0
+    property bool audioMuted: false
+
+    signal workspaceActivated(int workspaceId)
+
+    function pct(value, ready) {
+        return ready ? Math.round(Math.max(0, Math.min(1, value)) * 100) : 0;
+    }
+
+    function two(value) {
+        return value < 10 ? "0" + value : String(value);
+    }
+
+    function timeText(value) {
+        return root.two(value.getHours()) + ":" + root.two(value.getMinutes());
+    }
+
+    function dateText(value) {
+        const days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+        const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
+        return days[value.getDay()] + " // " + root.two(value.getDate()) + " " + months[value.getMonth()];
+    }
+
+    Timer {
+        interval: 30000
+        running: root.autoClock
+        repeat: true
+        triggeredOnStart: true
+        onTriggered: root.now = new Date()
+    }
+
+    // Faint drafting grid; no gradient and deliberately subordinate to data.
+    Repeater {
+        model: Math.ceil(root.width / 40)
+        Rectangle {
+            required property int index
+            x: index * 40
+            width: 1
+            height: root.height
+            color: Theme.text
+            opacity: 0.018
+        }
+    }
+
+    Repeater {
+        model: Math.ceil(root.height / 40)
+        Rectangle {
+            required property int index
+            y: index * 40
+            width: root.width
+            height: 1
+            color: Theme.text
+            opacity: 0.018
+        }
+    }
+
+    Item {
+        id: array
+        x: 12
+        y: 8
+        width: root.width - 24
+        height: 92
+
+        readonly property real identityWidth: root.compact ? 250 : 320
+        readonly property real radarWidth: root.compact ? 130 : 164
+        readonly property real stateWidth: root.compact ? 210 : 250
+        readonly property real flexWidth: Math.max(250, (width - identityWidth - radarWidth - stateWidth - 32) / 2)
+
+        Row {
+            anchors.fill: parent
+            spacing: 8
+
+            StatusBarPanel {
+                width: array.identityWidth
+                height: array.height
+                panelId: "001"
+                title: "COMMAND LAYER"
+
+                Text {
+                    x: 12
+                    y: 34
+                    text: root.hostName.toUpperCase()
+                    color: Theme.text
+                    font.family: Theme.displayFont
+                    font.pixelSize: root.compact ? 20 : 25
+                    font.bold: true
+                    font.letterSpacing: 2
+                    elide: Text.ElideRight
+                    width: parent.width - 92
+                }
+
+                Text {
+                    x: 13
+                    y: 63
+                    text: "STATUS ARRAY // " + (root.telemetryReady ? "LIVE" : "STANDBY")
+                    color: Theme.accent
+                    font.family: Theme.microFont
+                    font.pixelSize: 7
+                    font.letterSpacing: 1.4
+                }
+
+                Rectangle {
+                    x: parent.width - 75
+                    y: 36
+                    width: 1
+                    height: 43
+                    color: Theme.hair
+                }
+
+                Rectangle {
+                    x: parent.width - 62
+                    y: 42
+                    width: 5
+                    height: 5
+                    color: Theme.accent
+                    opacity: root.telemetryReady ? 1 : 0.35
+                }
+
+                Text {
+                    x: parent.width - 50
+                    y: 38
+                    text: root.telemetryReady ? "ONLINE" : "LOCAL"
+                    color: Theme.accent
+                    font.family: Theme.microFont
+                    font.pixelSize: 7
+                }
+
+                Text {
+                    x: parent.width - 63
+                    y: 57
+                    text: "NODE // " + (root.hostName || "--").toUpperCase().slice(0, 7)
+                    color: Theme.muted
+                    font.family: Theme.microFont
+                    font.pixelSize: 6
+                }
+
+                Shape {
+                    x: parent.width - 63
+                    y: 71
+                    width: 48
+                    height: 10
+                    ShapePath {
+                        fillColor: "transparent"
+                        strokeColor: Theme.accent
+                        strokeWidth: 1
+                        startX: 0; startY: 6
+                        PathLine { x: 11; y: 6 }
+                        PathLine { x: 16; y: 1 }
+                        PathLine { x: 22; y: 9 }
+                        PathLine { x: 27; y: 6 }
+                        PathLine { x: 48; y: 6 }
+                    }
+                }
+            }
+
+            StatusBarPanel {
+                width: array.flexWidth
+                height: array.height
+                panelId: "02"
+                title: "RESOURCE LATTICE"
+                meta: root.telemetryReady ? "REALTIME" : "FALLBACK"
+
+                Row {
+                    x: 11
+                    y: 32
+                    width: parent.width - 22
+                    height: 51
+                    spacing: root.compact ? 7 : 12
+
+                    MetricBlock {
+                        width: (parent.width - parent.spacing * (root.compact ? 1 : 2)) / (root.compact ? 2 : 3)
+                        label: "CPU"
+                        value: root.cpuFraction
+                        ready: root.ratesReady
+                        readout: root.ratesReady ? root.pct(root.cpuFraction, true) + "%" : "--"
+                        detailLeft: "CORE:" + (root.cpuThreads || "--")
+                        detailRight: root.ratesReady ? "BUSY" : "PRIME"
+                    }
+
+                    MetricBlock {
+                        width: (parent.width - parent.spacing * (root.compact ? 1 : 2)) / (root.compact ? 2 : 3)
+                        label: "MEM"
+                        value: root.memoryFraction
+                        ready: root.telemetryReady
+                        readout: root.telemetryReady ? root.pct(root.memoryFraction, true) + "%" : "--"
+                        detailLeft: "ALLOC"
+                        detailRight: root.memoryUsedText
+                    }
+
+                    MetricBlock {
+                        visible: !root.compact
+                        width: (parent.width - parent.spacing * 2) / 3
+                        label: "THERM"
+                        value: isFinite(root.temperatureCelsius) ? root.temperatureCelsius / 100 : 0
+                        ready: isFinite(root.temperatureCelsius)
+                        readout: isFinite(root.temperatureCelsius) ? Math.round(root.temperatureCelsius) + "°C" : "--"
+                        detailLeft: "ZONE:01"
+                        detailRight: isFinite(root.temperatureCelsius) && root.temperatureCelsius >= 85 ? "HOT" : "NOMINAL"
+                    }
+                }
+            }
+
+            StatusBarPanel {
+                width: array.radarWidth
+                height: array.height
+                panelId: "03"
+                title: "SCAN"
+
+                RadarGauge {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    y: 28
+                    size: 57
+                    level: root.cpuFraction
+                }
+            }
+
+            StatusBarPanel {
+                width: array.flexWidth
+                height: array.height
+                panelId: "04"
+                title: "CARRIER UPLINK"
+                meta: root.networkInterface.toUpperCase()
+
+                NetworkTrace {
+                    x: 12
+                    y: 43
+                    width: parent.width - (root.compact ? 117 : 145)
+                    height: 33
+                    level: root.ratesReady ? root.cpuFraction : 0.25
+                }
+
+                Column {
+                    anchors.right: parent.right
+                    anchors.rightMargin: 14
+                    y: 34
+                    width: root.compact ? 92 : 116
+                    spacing: 1
+
+                    Text {
+                        width: parent.width
+                        text: root.networkRxText
+                        horizontalAlignment: Text.AlignRight
+                        color: Theme.accent
+                        font.family: Theme.displayFont
+                        font.pixelSize: root.compact ? 11 : 13
+                        font.bold: true
+                        elide: Text.ElideLeft
+                    }
+                    MicroText { width: parent.width; text: "RX // DOWN"; horizontalAlignment: Text.AlignRight }
+                    Text {
+                        width: parent.width
+                        text: root.networkTxText
+                        horizontalAlignment: Text.AlignRight
+                        color: Theme.text
+                        font.family: Theme.displayFont
+                        font.pixelSize: root.compact ? 11 : 13
+                        font.bold: true
+                        elide: Text.ElideLeft
+                    }
+                    MicroText { width: parent.width; text: "TX // UP"; horizontalAlignment: Text.AlignRight }
+                }
+            }
+
+            StatusBarPanel {
+                width: array.stateWidth
+                height: array.height
+                panelId: "05"
+                title: "SYSTEM STATE"
+
+                Row {
+                    x: 10
+                    y: 35
+                    spacing: 6
+
+                    StateCell { code: "N"; active: root.ratesReady; label: "NET" }
+                    StateCell { code: root.audioMuted ? "M" : "A"; active: !root.audioMuted; label: "AUD" }
+                    StateCell { visible: !root.compact; code: String(root.trayCount); active: root.trayCount > 0; label: "TRAY" }
+                }
+
+                Rectangle {
+                    x: root.compact ? 101 : 151
+                    y: 33
+                    width: 1
+                    height: 46
+                    color: Theme.hair
+                }
+
+                Column {
+                    anchors.right: parent.right
+                    anchors.rightMargin: 12
+                    y: 34
+                    width: root.compact ? 91 : 82
+                    spacing: 2
+
+                    Text {
+                        width: parent.width
+                        text: root.timeText(root.now)
+                        horizontalAlignment: Text.AlignRight
+                        color: Theme.text
+                        font.family: Theme.displayFont
+                        font.pixelSize: root.compact ? 20 : 22
+                        font.bold: true
+                        font.letterSpacing: 1
+                    }
+                    Text {
+                        width: parent.width
+                        text: root.dateText(root.now)
+                        horizontalAlignment: Text.AlignRight
+                        color: Theme.accent
+                        font.family: Theme.microFont
+                        font.pixelSize: 6
+                        elide: Text.ElideLeft
+                    }
+                    MicroText { width: parent.width; text: "LOCAL TIME"; horizontalAlignment: Text.AlignRight }
+                }
+            }
+        }
+    }
+
+    StatusBarPanel {
+        id: rail
+        x: 12
+        y: 108
+        width: root.width - 24
+        height: 34
+        showHeader: false
+        chamfer: 10
+
+        Row {
+            anchors.fill: parent
+            anchors.leftMargin: 10
+            anchors.rightMargin: 10
+
+            RailSection {
+                width: root.compact ? 252 : 310
+                Text {
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "06 // DESKTOP"
+                    color: Theme.accent
+                    font.family: Theme.microFont
+                    font.pixelSize: 7
+                    font.letterSpacing: 1
+                }
+                Row {
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: 3
+                    Repeater {
+                        model: root.workspaceIds.slice(0, root.compact ? 4 : 6)
+                        Rectangle {
+                            required property var modelData
+                            width: 24
+                            height: 17
+                            color: Number(modelData) === root.activeWorkspaceId ? Theme.accentAlpha(0.18) : "transparent"
+                            border.width: 1
+                            border.color: Number(modelData) === root.activeWorkspaceId ? Theme.accent : Theme.hair
+                            Text {
+                                anchors.centerIn: parent
+                                text: root.two(Number(parent.modelData))
+                                color: Number(parent.modelData) === root.activeWorkspaceId ? Theme.accent : Theme.muted
+                                font.family: Theme.microFont
+                                font.pixelSize: 7
+                            }
+                            MouseArea {
+                                anchors.fill: parent
+                                onClicked: root.workspaceActivated(Number(parent.modelData))
+                            }
+                        }
+                    }
+                }
+            }
+
+            RailSection {
+                width: root.compact ? 260 : 410
+                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: "PROCESS" }
+                Text {
+                    x: 76
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "COMPOSITOR // NODE_EXPORTER // SHELL"
+                    color: root.telemetryReady ? Theme.text : Theme.muted
+                    font.family: Theme.microFont
+                    font.pixelSize: 7
+                    elide: Text.ElideRight
+                    width: parent.width - 84
+                }
+            }
+
+            RailSection {
+                width: root.compact ? 300 : 385
+                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: "VOL // ROOT" }
+                Text {
+                    x: 93
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: root.storageFreeText
+                    color: Theme.text
+                    font.family: Theme.microFont
+                    font.pixelSize: 8
+                }
+                SegmentMeter {
+                    anchors.right: parent.right
+                    anchors.rightMargin: 10
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: root.compact ? 95 : 170
+                    height: 7
+                    segments: root.compact ? 10 : 16
+                    value: root.storageFraction
+                    ready: root.telemetryReady
+                }
+            }
+
+            RailSection {
+                visible: !root.compact
+                width: 350
+                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: "AUDIO BUS" }
+                Text {
+                    x: 89
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: root.audioMuted ? "MUTED" : Math.round(root.audioFraction * 100) + "%"
+                    color: root.audioMuted ? Theme.muted : Theme.accent
+                    font.family: Theme.microFont
+                    font.pixelSize: 8
+                }
+                SegmentMeter {
+                    anchors.right: parent.right
+                    anchors.rightMargin: 10
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 155
+                    height: 7
+                    segments: 16
+                    value: root.audioFraction
+                    ready: true
+                }
+            }
+
+            RailSection {
+                width: Math.max(150, rail.width - (root.compact ? 812 : 1455) - 20)
+                borderVisible: false
+                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: root.compact ? "SYS // " + root.timeText(root.now) : "EVENTS" }
+                Text {
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: root.telemetryReady ? "WARN:00 // ERR:00" : "TELEMETRY WAIT"
+                    color: root.telemetryReady ? Theme.muted : Theme.accent
+                    font.family: Theme.microFont
+                    font.pixelSize: 7
+                    elide: Text.ElideLeft
+                    width: parent.width - 64
+                    horizontalAlignment: Text.AlignRight
+                }
+            }
+        }
+    }
+
+    // Bottom routing trace and caution hatch.
+    Shape {
+        x: 12
+        y: 150
+        width: root.width - 24
+        height: 12
+        ShapePath {
+            fillColor: "transparent"
+            strokeColor: Theme.accentAlpha(0.55)
+            strokeWidth: 1
+            startX: 0; startY: 1
+            PathLine { x: 220; y: 1 }
+            PathLine { x: 232; y: 11 }
+            PathLine { x: 330; y: 11 }
+        }
+    }
+
+    Row {
+        x: 360
+        y: 151
+        width: root.width - 372
+        height: 3
+        spacing: 5
+        clip: true
+        Repeater {
+            model: Math.ceil(parent.width / 10)
+            Rectangle {
+                required property int index
+                width: 5
+                height: 3
+                color: index % 2 === 0 ? Theme.accent : "transparent"
+                opacity: 0.58
+            }
+        }
+    }
+
+    component MicroText: Text {
+        color: Theme.muted
+        font.family: Theme.microFont
+        font.pixelSize: 6
+        font.letterSpacing: 0.7
+    }
+
+    component RailSection: Item {
+        property bool borderVisible: true
+        height: rail.height
+        Rectangle {
+            visible: parent.borderVisible
+            anchors.right: parent.right
+            width: 1
+            height: parent.height
+            color: Theme.hair
+            opacity: 0.65
+        }
+    }
+
+    component MetricBlock: Item {
+        id: metric
+        property string label: ""
+        property real value: 0
+        property bool ready: false
+        property string readout: "--"
+        property string detailLeft: ""
+        property string detailRight: ""
+        height: 51
+
+        MicroText { x: 0; y: 1; text: metric.label; font.pixelSize: 7 }
+        Text {
+            anchors.right: parent.right
+            y: -3
+            text: metric.readout
+            color: Theme.text
+            font.family: Theme.displayFont
+            font.pixelSize: root.compact ? 14 : 17
+            font.bold: true
+        }
+        SegmentMeter {
+            x: 0; y: 19
+            width: parent.width
+            height: 9
+            segments: 10
+            value: metric.value
+            ready: metric.ready
+        }
+        MicroText { x: 0; y: 34; text: metric.detailLeft }
+        MicroText { anchors.right: parent.right; y: 34; text: metric.detailRight; horizontalAlignment: Text.AlignRight }
+    }
+
+    component SegmentMeter: Row {
+        id: meter
+        property int segments: 10
+        property real value: 0
+        property bool ready: false
+        spacing: 2
+        Repeater {
+            model: meter.segments
+            Rectangle {
+                required property int index
+                width: Math.max(2, (meter.width - (meter.segments - 1) * meter.spacing) / meter.segments)
+                height: meter.height
+                readonly property bool on: meter.ready && index < Math.round(Math.max(0, Math.min(1, meter.value)) * meter.segments)
+                color: on ? Theme.accent : Theme.textAlpha(0.06)
+                border.width: 1
+                border.color: on ? Theme.accent : Theme.textAlpha(0.18)
+            }
+        }
+    }
+
+    component StateCell: Item {
+        id: state
+        property string code: "--"
+        property string label: ""
+        property bool active: false
+        width: root.compact ? 39 : 43
+        height: 42
+
+        Shape {
+            anchors.fill: parent
+            ShapePath {
+                fillColor: state.active ? Theme.accentAlpha(0.18) : "transparent"
+                strokeColor: state.active ? Theme.accent : Theme.hair
+                strokeWidth: 1
+                startX: 1; startY: 1
+                PathLine { x: parent.width - 7; y: 1 }
+                PathLine { x: parent.width - 1; y: 7 }
+                PathLine { x: parent.width - 1; y: parent.height - 1 }
+                PathLine { x: 7; y: parent.height - 1 }
+                PathLine { x: 1; y: parent.height - 7 }
+                PathLine { x: 1; y: 1 }
+            }
+        }
+        Text {
+            anchors.horizontalCenter: parent.horizontalCenter
+            y: 7
+            text: state.code
+            color: state.active ? Theme.accent : Theme.text
+            font.family: Theme.displayFont
+            font.pixelSize: 13
+            font.bold: true
+        }
+        MicroText { anchors.horizontalCenter: parent.horizontalCenter; y: 27; text: state.label }
+    }
+
+    component RadarGauge: Item {
+        id: radar
+        property real size: 58
+        property real level: 0
+        width: size
+        height: size
+
+        Repeater {
+            model: [1, 0.72, 0.36]
+            Rectangle {
+                required property int index
+                required property var modelData
+                anchors.centerIn: parent
+                width: radar.size * Number(modelData)
+                height: width
+                radius: width / 2
+                color: "transparent"
+                border.width: 1
+                border.color: index === 0 ? Theme.accent : Theme.hair
+            }
+        }
+        Rectangle { x: 0; y: parent.height / 2; width: parent.width; height: 1; color: Theme.hair }
+        Rectangle { x: parent.width / 2; y: 0; width: 1; height: parent.height; color: Theme.hair }
+        Rectangle { x: 12; y: 18; width: 4; height: 4; color: Theme.accent }
+        Rectangle { x: parent.width - 14; y: parent.height - 20; width: 4; height: 4; color: Theme.accent }
+        Rectangle { x: parent.width / 2; y: parent.height - 11; width: 4; height: 4; color: Theme.accent }
+        MicroText { anchors.right: parent.right; y: 3; text: "R:" + Math.round(radar.level * 99); color: Theme.accent }
+    }
+
+    component NetworkTrace: Item {
+        id: trace
+        property real level: 0
+        Rectangle { x: 0; y: parent.height - 1; width: parent.width; height: 1; color: Theme.hair }
+        Rectangle { x: 0; y: 0; width: 1; height: parent.height; color: Theme.hair }
+        Shape {
+            anchors.fill: parent
+            ShapePath {
+                fillColor: "transparent"
+                strokeColor: Theme.accent
+                strokeWidth: 1.2
+                startX: 0; startY: trace.height * 0.65
+                PathLine { x: trace.width * 0.10; y: trace.height * 0.65 }
+                PathLine { x: trace.width * 0.15; y: trace.height * (0.25 + trace.level * 0.15) }
+                PathLine { x: trace.width * 0.21; y: trace.height * 0.78 }
+                PathLine { x: trace.width * 0.31; y: trace.height * 0.56 }
+                PathLine { x: trace.width * 0.43; y: trace.height * 0.62 }
+                PathLine { x: trace.width * 0.49; y: trace.height * 0.18 }
+                PathLine { x: trace.width * 0.57; y: trace.height * 0.82 }
+                PathLine { x: trace.width * 0.68; y: trace.height * 0.58 }
+                PathLine { x: trace.width * 0.79; y: trace.height * 0.62 }
+                PathLine { x: trace.width * 0.85; y: trace.height * 0.34 }
+                PathLine { x: trace.width * 0.91; y: trace.height * 0.75 }
+                PathLine { x: trace.width; y: trace.height * 0.60 }
+            }
+        }
+    }
+}

dotfiles/quickshell/widgets/bar/StatusBarPanel.qml

@@ -0,0 +1,130 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Shapes
+import qs.widgets.theme
+
+// Chamfered panel chrome for the dense status rail: outline, corner accent
+// lines, and the optional header strip (id chip / title / meta / tick marks).
+// Content is supplied as children by the call site.
+//
+// Colors and fonts both come from the Theme singleton.
+Item {
+    id: panel
+
+    property string panelId: ""
+    property string title: ""
+    property string meta: ""
+    property bool showHeader: true
+    property int chamfer: 13
+    property int offsetY: 2
+    property int accentLineThickness: 3
+
+    Shape {
+        id: panelShape
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+
+        ShapePath {
+            fillColor: Theme.surface
+            strokeColor: Theme.hair
+            strokeWidth: 1
+            startX: 0; startY: panel.offsetY
+            PathLine { x: panelShape.width - panel.chamfer; y: panel.offsetY }
+            PathLine { x: panelShape.width; y: panel.chamfer }
+            PathLine { x: panelShape.width; y: panelShape.height }
+            PathLine { x: panel.chamfer; y: panelShape.height }
+            PathLine { x: 0; y: panelShape.height - panel.chamfer }
+            PathLine { x: 0; y: panel.offsetY }
+        }
+
+        // Upper left accent line
+        ShapePath {
+            fillColor: Theme.accent
+            strokeWidth: 0
+            startX: 0; startY: 0
+            PathLine { x: Math.min(49, panelShape.width / 3); y: 0 }
+            PathLine { x: Math.min(49, panelShape.width / 3); y: panel.accentLineThickness }
+            PathLine { x: 0; y: panel.accentLineThickness }
+            PathLine { x: 0; y: 0 }
+        }
+
+        // Lower right accent line
+        ShapePath {
+            fillColor: Theme.accent
+            strokeWidth: 0
+            startX: panelShape.width; startY: panelShape.height
+            PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height }
+            PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height - panel.accentLineThickness }
+            PathLine { x: panelShape.width; y: panelShape.height - panel.accentLineThickness }
+            PathLine { x: panelShape.width; y: panelShape.height }
+        }
+    }
+
+    Rectangle {
+        visible: panel.showHeader
+        x: 1; y: 22
+        width: parent.width - 2
+        height: 1
+        color: Theme.text
+        opacity: 0.12
+    }
+
+    Rectangle {
+        visible: panel.showHeader
+        x: 5; y: 7
+        width: panel.panelId.length > 2 ? 29 : 24
+        height: 11
+        color: Theme.accent
+        Text {
+            anchors.centerIn: parent
+            text: panel.panelId
+            color: Theme.surface
+            font.family: Theme.microFont
+            font.pixelSize: 8
+            font.bold: true
+        }
+    }
+
+    Text {
+        visible: panel.showHeader
+        x: 40; y: 7
+        width: parent.width - 105
+        text: panel.title
+        color: Theme.text
+        font.family: Theme.displayFont
+        font.pixelSize: 9
+        font.bold: true
+        font.letterSpacing: 1.1
+        elide: Text.ElideRight
+    }
+
+    // Inlined rather than reusing DenseBarContent's MicroText, which is an
+    // inline component and therefore not visible from another file.
+    Text {
+        visible: panel.showHeader && panel.meta.length > 0
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+        y: 6
+        text: panel.meta
+        width: Math.min(80, parent.width / 4)
+        color: Theme.muted
+        font.family: Theme.microFont
+        font.pixelSize: 6
+        font.letterSpacing: 0.7
+        horizontalAlignment: Text.AlignRight
+        elide: Text.ElideRight
+    }
+
+    Row {
+        visible: panel.showHeader
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+        y: 14
+        spacing: 2
+        Repeater {
+            model: 5
+            Rectangle { required property int index; width: 4; height: 2; color: Theme.accent }
+        }
+    }
+}

dotfiles/quickshell/widgets/decoration/TopLeftPanelShape.qml

@@ -1,10 +1,11 @@
 import QtQuick
 import QtQuick.Shapes
+import qs.widgets.theme
 
 Shape {
     preferredRendererType: Shape.CurveRenderer
     ShapePath {
-        fillColor: "#FFD063"
+        fillColor: Theme.accent
         strokeWidth: 0
 
         startX: 0

dotfiles/quickshell/widgets/input/TextField.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts
 import QtQuick.Shapes
 
 import qs.widgets.decoration
+import qs.widgets.theme
 
 WrapperItem {
     RowLayout {
@@ -24,7 +25,7 @@ WrapperItem {
 
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#0F1012"
+                    fillColor: Theme.surface
 
                     startX: 8
                     startY: 0
@@ -52,7 +53,7 @@ WrapperItem {
 
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#0F1012"
+                    fillColor: Theme.surface
 
                     startX: 16
                     startY: 0
@@ -83,7 +84,7 @@ WrapperItem {
                     startY: 0
 
                     strokeWidth: 0
-                    fillColor: "#0F1012"
+                    fillColor: Theme.surface
 
                     PathLine {
                         x: shape.width

dotfiles/quickshell/widgets/launcher/LauncherConsole.qml

@@ -6,6 +6,7 @@ import Quickshell.Wayland
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.widgets.theme
 
 // Variant 4 — "Console": a full-width command deck that unfolds down out of
 // the top bar, with a horizontal carousel of app cards. While open it drives
@@ -99,7 +100,7 @@ Scope {
             anchors.right: parent.right
 
             clip: true
-            color: "#0F1012"
+            color: Theme.surface
 
             height: root.active ? win.openHeight : 0
 
@@ -116,7 +117,7 @@ Scope {
 
                 // Accent lid — mirrors the top bar strip, reads as its extension.
                 Rectangle {
-                    color: "#FFD063"
+                    color: Theme.accent
                     implicitHeight: 4
                     Layout.fillWidth: true
                 }
@@ -132,8 +133,8 @@ Scope {
 
                     Text {
                         text: ">_"
-                        color: "#FFD063"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.accent
+                        font.family: Theme.readoutFont
                         font.pointSize: 22
                         font.bold: true
                     }
@@ -147,7 +148,7 @@ Scope {
                             anchors.fill: parent
                             verticalAlignment: TextInput.AlignVCenter
 
-                            color: "#EEEEEE"
+                            color: Theme.text
                             font.pointSize: 16
                             clip: true
 
@@ -182,7 +183,7 @@ Scope {
                                 verticalAlignment: Text.AlignVCenter
                                 visible: input.text.length === 0
                                 text: "launch application…"
-                                color: "#7A7B7D"
+                                color: Theme.muted
                                 font: input.font
                             }
                         }
@@ -190,14 +191,14 @@ Scope {
 
                     Text {
                         text: model.apps.length + " apps"
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 15
                     }
                 }
 
                 Rectangle {
-                    color: "#292C30"
+                    color: Theme.raised
                     implicitHeight: 1
                     Layout.fillWidth: true
                 }
@@ -236,9 +237,9 @@ Scope {
 
                             Rectangle {
                                 anchors.fill: parent
-                                color: card.selected ? "#292C30" : "transparent"
+                                color: card.selected ? Theme.raised : "transparent"
                                 border.width: 1
-                                border.color: card.selected ? "#FFD063" : "#292C30"
+                                border.color: card.selected ? Theme.accent : Theme.raised
 
                                 Behavior on border.color {
                                     ColorAnimation {
@@ -261,7 +262,7 @@ Scope {
                                     Text {
                                         Layout.fillWidth: true
                                         text: card.modelData.name
-                                        color: card.selected ? "#FFD063" : "#EEEEEE"
+                                        color: card.selected ? Theme.accent : Theme.text
                                         font.pointSize: 9
                                         horizontalAlignment: Text.AlignHCenter
                                         elide: Text.ElideRight
@@ -277,8 +278,8 @@ Scope {
                         anchors.centerIn: parent
                         visible: model.apps.length === 0
                         text: "no matches"
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 16
                     }
                 }

dotfiles/quickshell/widgets/launcher/LauncherCorner.qml

@@ -7,6 +7,7 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Shapes
+import qs.widgets.theme
 
 // Variant 7 — a copy of the "Slant" (V6) launcher, plus a small floating
 // power panel docked to its right with Shutdown / Reboot buttons.
@@ -77,7 +78,7 @@ Scope {
         // Dim backdrop — click to dismiss.
         Rectangle {
             anchors.fill: parent
-            color: "#0A0A0C"
+            color: Theme.surface
             opacity: 0.55
 
             MouseArea {
@@ -107,8 +108,8 @@ Scope {
                 preferredRendererType: Shape.CurveRenderer
 
                 ShapePath {
-                    fillColor: "#0F1012"
-                    strokeColor: "#FFD063"
+                    fillColor: Theme.surface
+                    strokeColor: Theme.accent
                     strokeWidth: 2
 
                     startX: frame.chamfer
@@ -153,7 +154,7 @@ Scope {
                 // run out to the top and left edges to meet the straight borders.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: 0
                     startY: frame.chamfer
@@ -179,7 +180,7 @@ Scope {
                 // bottom and right edges.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: panelShape.height - frame.chamfer
@@ -205,7 +206,7 @@ Scope {
                 // detached from the panel by the width of the cut.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: panelShape.height
@@ -228,7 +229,7 @@ Scope {
                 // slanted end pieces on both arms.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     // inner, right end of the bottom arm
                     startX: panelShape.width / 3
@@ -277,7 +278,7 @@ Scope {
                 // slanted end pieces on both arms.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     // inner, bottom of the right arm
                     startX: panelShape.width
@@ -345,7 +346,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 6
                             startY: 0
                             PathLine {
@@ -367,7 +368,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 15
                             startY: 0
                             PathLine {
@@ -389,7 +390,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 24
                             startY: 0
                             PathLine {
@@ -420,8 +421,8 @@ Scope {
                             anchors.fill: parent
                             verticalAlignment: TextInput.AlignVCenter
 
-                            color: "#EEEEEE"
-                            font.family: "Digital-7 Mono"
+                            color: Theme.text
+                            font.family: Theme.readoutFont
                             font.pointSize: 20
                             font.letterSpacing: 1
                             clip: true
@@ -457,7 +458,7 @@ Scope {
                                 verticalAlignment: Text.AlignVCenter
                                 visible: input.text.length === 0
                                 text: "run"
-                                color: "#7A7B7D"
+                                color: Theme.muted
                                 font: input.font
                             }
                         }
@@ -465,8 +466,8 @@ Scope {
 
                     Text {
                         text: model.apps.length
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 18
                     }
                 }
@@ -489,7 +490,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: divider.slant
                             startY: 0
                             PathLine {
@@ -512,7 +513,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 0
                             startY: divider.height
                             PathLine {
@@ -535,7 +536,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: divider.width
                             startY: 0
                             PathLine {
@@ -597,7 +598,7 @@ Scope {
                             // Body
                             ShapePath {
                                 strokeWidth: 0
-                                fillColor: "#22262C"
+                                fillColor: Theme.raised
                                 startX: appRow.shear
                                 startY: 0
                                 PathLine {
@@ -620,7 +621,7 @@ Scope {
                             // Left accent edge
                             ShapePath {
                                 strokeWidth: 0
-                                fillColor: "#FFD063"
+                                fillColor: Theme.accent
                                 startX: appRow.shear
                                 startY: 0
                                 PathLine {
@@ -655,7 +656,7 @@ Scope {
 
                             Text {
                                 text: appRow.modelData.name
-                                color: appRow.selected ? "#FFD063" : "#EEEEEE"
+                                color: appRow.selected ? Theme.accent : Theme.text
                                 font.pointSize: 12
                                 elide: Text.ElideRight
                                 Layout.fillWidth: true
@@ -663,7 +664,7 @@ Scope {
 
                             Text {
                                 text: appRow.modelData.genericName || ""
-                                color: "#7A7B7D"
+                                color: Theme.muted
                                 font.pointSize: 10
                                 elide: Text.ElideRight
                                 Layout.maximumWidth: 220
@@ -694,8 +695,8 @@ Scope {
                 preferredRendererType: Shape.CurveRenderer
 
                 ShapePath {
-                    fillColor: "#FFD063"
-                    strokeColor: "#FFD063"
+                    fillColor: Theme.accent
+                    strokeColor: Theme.accent
                     strokeWidth: 2
 
                     startX: 0
@@ -732,9 +733,9 @@ Scope {
                 Text {
                     Layout.alignment: Qt.AlignHCenter
                     text: "POWER"
-                    font.family: "Digital-7 Mono"
+                    font.family: Theme.readoutFont
                     font.pointSize: 11
-                    color: "#0F1012"
+                    color: Theme.surface
                 }
 
                 Repeater {
@@ -762,8 +763,8 @@ Scope {
 
                             ShapePath {
                                 strokeWidth: 1
-                                strokeColor: powerButton.containsMouse ? "#FFD063" : "#7A7B7D"
-                                fillColor: "#292C30"
+                                strokeColor: powerButton.containsMouse ? Theme.accent : Theme.muted
+                                fillColor: Theme.raised
 
                                 startX: powerButton.chamfer
                                 startY: 0
@@ -785,8 +786,8 @@ Scope {
                         Text {
                             anchors.centerIn: parent
                             text: powerButton.modelData.label
-                            color: powerButton.containsMouse ? "#FFD063" : "#EEEEEE"
-                            font.family: "Digital-7 Mono"
+                            color: powerButton.containsMouse ? Theme.accent : Theme.text
+                            font.family: Theme.readoutFont
                             font.pointSize: 11
                         }
                     }

dotfiles/quickshell/widgets/launcher/LauncherDock.qml

@@ -6,6 +6,7 @@ import Quickshell.Wayland
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.widgets.theme
 
 // Variant 5 — "Dock": the Console concept mirrored to the bottom edge. A
 // full-width deck rises up out of the bottom bar, which energizes via
@@ -98,7 +99,7 @@ Scope {
             anchors.right: parent.right
 
             clip: true
-            color: "#0F1012"
+            color: Theme.surface
 
             height: root.active ? win.openHeight : 0
 
@@ -153,9 +154,9 @@ Scope {
 
                                 Rectangle {
                                     anchors.fill: parent
-                                    color: card.selected ? "#292C30" : "transparent"
+                                    color: card.selected ? Theme.raised : "transparent"
                                     border.width: 1
-                                    border.color: card.selected ? "#FFD063" : "#292C30"
+                                    border.color: card.selected ? Theme.accent : Theme.raised
 
                                     Behavior on border.color {
                                         ColorAnimation {
@@ -178,7 +179,7 @@ Scope {
                                         Text {
                                             Layout.fillWidth: true
                                             text: card.modelData.name
-                                            color: card.selected ? "#FFD063" : "#EEEEEE"
+                                            color: card.selected ? Theme.accent : Theme.text
                                             font.pointSize: 9
                                             horizontalAlignment: Text.AlignHCenter
                                             elide: Text.ElideRight
@@ -194,14 +195,14 @@ Scope {
                             anchors.centerIn: parent
                             visible: model.apps.length === 0
                             text: "no matches"
-                            color: "#7A7B7D"
-                            font.family: "Digital-7 Mono"
+                            color: Theme.muted
+                            font.family: Theme.readoutFont
                             font.pointSize: 16
                         }
                     }
 
                     Rectangle {
-                        color: "#292C30"
+                        color: Theme.raised
                         implicitHeight: 1
                         Layout.fillWidth: true
                     }
@@ -217,8 +218,8 @@ Scope {
 
                         Text {
                             text: ">_"
-                            color: "#FFD063"
-                            font.family: "Digital-7 Mono"
+                            color: Theme.accent
+                            font.family: Theme.readoutFont
                             font.pointSize: 22
                             font.bold: true
                         }
@@ -232,7 +233,7 @@ Scope {
                                 anchors.fill: parent
                                 verticalAlignment: TextInput.AlignVCenter
 
-                                color: "#EEEEEE"
+                                color: Theme.text
                                 font.pointSize: 16
                                 clip: true
 
@@ -267,7 +268,7 @@ Scope {
                                     verticalAlignment: Text.AlignVCenter
                                     visible: input.text.length === 0
                                     text: "launch application…"
-                                    color: "#7A7B7D"
+                                    color: Theme.muted
                                     font: input.font
                                 }
                             }
@@ -275,15 +276,15 @@ Scope {
 
                         Text {
                             text: model.apps.length + " apps"
-                            color: "#7A7B7D"
-                            font.family: "Digital-7 Mono"
+                            color: Theme.muted
+                            font.family: Theme.readoutFont
                             font.pointSize: 15
                         }
                     }
 
                     // Accent lid — mirrors the bottom bar strip.
                     Rectangle {
-                        color: "#FFD063"
+                        color: Theme.accent
                         implicitHeight: 4
                         Layout.fillWidth: true
                     }

dotfiles/quickshell/widgets/launcher/LauncherGrid.qml

@@ -6,6 +6,7 @@ import Quickshell.Wayland
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.widgets.theme
 
 // Variant 2 — "Grid": centered app-drawer with a dim backdrop and icon tiles.
 Scope {
@@ -78,7 +79,7 @@ Scope {
         // Dim backdrop — click anywhere outside to dismiss.
         Rectangle {
             anchors.fill: parent
-            color: "#0A0A0C"
+            color: Theme.surface
             opacity: 0.55
 
             MouseArea {
@@ -93,9 +94,9 @@ Scope {
             width: 760
             height: 560
 
-            color: "#0F1012"
+            color: Theme.surface
             border.width: 1
-            border.color: "#FFD063"
+            border.color: Theme.accent
             opacity: 0.98
 
             // Accent corner brackets for the cyberpunk frame.
@@ -104,14 +105,14 @@ Scope {
                 anchors.left: parent.left
                 width: 5
                 height: 28
-                color: "#FFD063"
+                color: Theme.accent
             }
             Rectangle {
                 anchors.top: parent.top
                 anchors.right: parent.right
                 width: 28
                 height: 5
-                color: "#FFD063"
+                color: Theme.accent
             }
 
             ColumnLayout {
@@ -126,8 +127,8 @@ Scope {
 
                     Text {
                         text: "APPS"
-                        color: "#FFD063"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.accent
+                        font.family: Theme.readoutFont
                         font.pointSize: 22
                         font.letterSpacing: 3
                     }
@@ -138,9 +139,9 @@ Scope {
 
                         Rectangle {
                             anchors.fill: parent
-                            color: "#292C30"
+                            color: Theme.raised
                             border.width: 1
-                            border.color: input.activeFocus ? "#FFD063" : "#7A7B7D"
+                            border.color: input.activeFocus ? Theme.accent : Theme.muted
 
                             Behavior on border.color {
                                 ColorAnimation {
@@ -155,7 +156,7 @@ Scope {
                                 anchors.rightMargin: 12
                                 verticalAlignment: TextInput.AlignVCenter
 
-                                color: "#EEEEEE"
+                                color: Theme.text
                                 font.pointSize: 13
                                 clip: true
 
@@ -198,7 +199,7 @@ Scope {
                                     anchors.verticalCenter: parent.verticalCenter
                                     visible: input.text.length === 0
                                     text: "Type to search…"
-                                    color: "#7A7B7D"
+                                    color: Theme.muted
                                     font: input.font
                                 }
                             }
@@ -207,7 +208,7 @@ Scope {
                 }
 
                 Rectangle {
-                    color: "#FFD063"
+                    color: Theme.accent
                     implicitHeight: 3
                     Layout.fillWidth: true
                 }
@@ -242,9 +243,9 @@ Scope {
                         Rectangle {
                             anchors.fill: parent
                             anchors.margins: 6
-                            color: tile.selected ? "#292C30" : "transparent"
+                            color: tile.selected ? Theme.raised : "transparent"
                             border.width: 1
-                            border.color: tile.selected ? "#FFD063" : "transparent"
+                            border.color: tile.selected ? Theme.accent : "transparent"
 
                             Behavior on border.color {
                                 ColorAnimation {
@@ -266,7 +267,7 @@ Scope {
                                 Text {
                                     Layout.fillWidth: true
                                     text: tile.modelData.name
-                                    color: tile.selected ? "#FFD063" : "#EEEEEE"
+                                    color: tile.selected ? Theme.accent : Theme.text
                                     font.pointSize: 10
                                     horizontalAlignment: Text.AlignHCenter
                                     elide: Text.ElideRight

dotfiles/quickshell/widgets/launcher/LauncherSlant.qml

@@ -7,6 +7,7 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Shapes
+import qs.widgets.theme
 
 // Variant 6 — "Slant": breaks up the rectangular layout with angled geometry —
 // a chamfered panel, a slanted header divider and sheared row highlights.
@@ -77,7 +78,7 @@ Scope {
         // Dim backdrop — click to dismiss.
         Rectangle {
             anchors.fill: parent
-            color: "#0A0A0C"
+            color: Theme.surface
             opacity: 0.55
 
             MouseArea {
@@ -107,8 +108,8 @@ Scope {
                 preferredRendererType: Shape.CurveRenderer
 
                 ShapePath {
-                    fillColor: "#0F1012"
-                    strokeColor: "#FFD063"
+                    fillColor: Theme.surface
+                    strokeColor: Theme.accent
                     strokeWidth: 2
 
                     startX: frame.chamfer
@@ -153,7 +154,7 @@ Scope {
                 // run out to the top and left edges to meet the straight borders.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: 0
                     startY: frame.chamfer
@@ -179,7 +180,7 @@ Scope {
                 // bottom and right edges.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: panelShape.height - frame.chamfer
@@ -205,7 +206,7 @@ Scope {
                 // detached from the panel by the width of the cut.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: panelShape.height
@@ -228,7 +229,7 @@ Scope {
                 // slanted end pieces on both arms.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     // inner, right end of the bottom arm
                     startX: panelShape.width / 3
@@ -277,7 +278,7 @@ Scope {
                 // slanted end pieces on both arms.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     // inner, bottom of the right arm
                     startX: panelShape.width
@@ -345,7 +346,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 6
                             startY: 0
                             PathLine {
@@ -367,7 +368,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 15
                             startY: 0
                             PathLine {
@@ -389,7 +390,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 24
                             startY: 0
                             PathLine {
@@ -420,8 +421,8 @@ Scope {
                             anchors.fill: parent
                             verticalAlignment: TextInput.AlignVCenter
 
-                            color: "#EEEEEE"
-                            font.family: "Digital-7 Mono"
+                            color: Theme.text
+                            font.family: Theme.readoutFont
                             font.pointSize: 20
                             font.letterSpacing: 1
                             clip: true
@@ -457,7 +458,7 @@ Scope {
                                 verticalAlignment: Text.AlignVCenter
                                 visible: input.text.length === 0
                                 text: "run"
-                                color: "#7A7B7D"
+                                color: Theme.muted
                                 font: input.font
                             }
                         }
@@ -465,8 +466,8 @@ Scope {
 
                     Text {
                         text: model.apps.length
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 18
                     }
                 }
@@ -489,7 +490,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: divider.slant
                             startY: 0
                             PathLine {
@@ -512,7 +513,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 0
                             startY: divider.height
                             PathLine {
@@ -535,7 +536,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: divider.width
                             startY: 0
                             PathLine {
@@ -597,7 +598,7 @@ Scope {
                             // Body
                             ShapePath {
                                 strokeWidth: 0
-                                fillColor: "#22262C"
+                                fillColor: Theme.raised
                                 startX: appRow.shear
                                 startY: 0
                                 PathLine {
@@ -620,7 +621,7 @@ Scope {
                             // Left accent edge
                             ShapePath {
                                 strokeWidth: 0
-                                fillColor: "#FFD063"
+                                fillColor: Theme.accent
                                 startX: appRow.shear
                                 startY: 0
                                 PathLine {
@@ -655,7 +656,7 @@ Scope {
 
                             Text {
                                 text: appRow.modelData.name
-                                color: appRow.selected ? "#FFD063" : "#EEEEEE"
+                                color: appRow.selected ? Theme.accent : Theme.text
                                 font.pointSize: 12
                                 elide: Text.ElideRight
                                 Layout.fillWidth: true
@@ -663,7 +664,7 @@ Scope {
 
                             Text {
                                 text: appRow.modelData.genericName || ""
-                                color: "#7A7B7D"
+                                color: Theme.muted
                                 font.pointSize: 10
                                 elide: Text.ElideRight
                                 Layout.maximumWidth: 220

dotfiles/quickshell/widgets/launcher/LauncherSpotlight.qml

@@ -6,6 +6,7 @@ import Quickshell.Wayland
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.widgets.theme
 
 // Variant 3 — "Spotlight": top-center command bar with a compact result list.
 Scope {
@@ -91,9 +92,9 @@ Scope {
             Rectangle {
                 Layout.fillWidth: true
                 implicitHeight: 60
-                color: "#0F1012"
+                color: Theme.surface
                 border.width: 1
-                border.color: "#FFD063"
+                border.color: Theme.accent
 
                 RowLayout {
                     anchors.fill: parent
@@ -103,8 +104,8 @@ Scope {
 
                     Text {
                         text: ">"
-                        color: "#FFD063"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.accent
+                        font.family: Theme.readoutFont
                         font.pointSize: 26
                         font.bold: true
                     }
@@ -118,7 +119,7 @@ Scope {
                             anchors.fill: parent
                             verticalAlignment: TextInput.AlignVCenter
 
-                            color: "#EEEEEE"
+                            color: Theme.text
                             font.pointSize: 17
                             clip: true
 
@@ -153,7 +154,7 @@ Scope {
                                 verticalAlignment: Text.AlignVCenter
                                 visible: input.text.length === 0
                                 text: "run application"
-                                color: "#7A7B7D"
+                                color: Theme.muted
                                 font: input.font
                             }
                         }
@@ -161,8 +162,8 @@ Scope {
 
                     Text {
                         text: model.apps.length + " ▸"
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 16
                     }
                 }
@@ -172,7 +173,7 @@ Scope {
             Rectangle {
                 Layout.fillWidth: true
                 implicitHeight: 3
-                color: "#FFD063"
+                color: Theme.accent
                 visible: model.apps.length > 0
             }
 
@@ -181,11 +182,11 @@ Scope {
                 Layout.fillWidth: true
                 // Cap the visible height to maxRows; scroll beyond that.
                 implicitHeight: Math.min(model.apps.length, win.maxRows) * 44 + 2
-                color: "#0F1012"
+                color: Theme.surface
                 opacity: 0.97
                 visible: model.apps.length > 0
                 border.width: 1
-                border.color: "#292C30"
+                border.color: Theme.raised
 
                 ListView {
                     id: list
@@ -215,14 +216,14 @@ Scope {
 
                         Rectangle {
                             anchors.fill: parent
-                            color: entry.selected ? "#1A1C1F" : "transparent"
+                            color: entry.selected ? Theme.selection : "transparent"
 
                             Rectangle {
                                 anchors.left: parent.left
                                 anchors.top: parent.top
                                 anchors.bottom: parent.bottom
                                 width: 3
-                                color: "#FFD063"
+                                color: Theme.accent
                                 visible: entry.selected
                             }
 
@@ -239,7 +240,7 @@ Scope {
 
                                 Text {
                                     text: entry.modelData.name
-                                    color: entry.selected ? "#FFD063" : "#EEEEEE"
+                                    color: entry.selected ? Theme.accent : Theme.text
                                     font.pointSize: 12
                                     elide: Text.ElideRight
                                     Layout.fillWidth: true
@@ -247,7 +248,7 @@ Scope {
 
                                 Text {
                                     text: entry.modelData.genericName || ""
-                                    color: "#7A7B7D"
+                                    color: Theme.muted
                                     font.pointSize: 10
                                     elide: Text.ElideRight
                                     Layout.maximumWidth: 200

dotfiles/quickshell/widgets/launcher/LauncherStack.qml

@@ -6,6 +6,7 @@ import Quickshell.Wayland
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.widgets.theme
 
 // Variant 1 — "Stack": left-anchored vertical list launcher.
 // Framed with the top/bottom accent strips used by the main Bar.
@@ -82,7 +83,7 @@ Scope {
             spacing: 0
 
             Rectangle {
-                color: "#FFD063"
+                color: Theme.accent
                 implicitHeight: 5
                 Layout.fillWidth: true
             }
@@ -93,8 +94,8 @@ Scope {
 
                 margin: 12
                 border.width: 1
-                border.color: "#FFD063"
-                color: "#0F1012"
+                border.color: Theme.accent
+                color: Theme.surface
                 opacity: 0.95
 
                 ColumnLayout {
@@ -107,7 +108,7 @@ Scope {
 
                         Text {
                             text: "▚"
-                            color: "#FFD063"
+                            color: Theme.accent
                             font.pointSize: 14
                             font.bold: true
                         }
@@ -121,8 +122,8 @@ Scope {
                                 anchors.fill: parent
                                 verticalAlignment: TextInput.AlignVCenter
 
-                                color: "#EEEEEE"
-                                font.family: "Digital-7 Mono"
+                                color: Theme.text
+                                font.family: Theme.readoutFont
                                 font.pointSize: 16
                                 clip: true
 
@@ -158,7 +159,7 @@ Scope {
                                     verticalAlignment: Text.AlignVCenter
                                     visible: input.text.length === 0
                                     text: "search"
-                                    color: "#7A7B7D"
+                                    color: Theme.muted
                                     font: input.font
                                 }
                             }
@@ -166,14 +167,14 @@ Scope {
 
                         Text {
                             text: model.apps.length
-                            color: "#7A7B7D"
-                            font.family: "Digital-7 Mono"
+                            color: Theme.muted
+                            font.family: Theme.readoutFont
                             font.pointSize: 14
                         }
                     }
 
                     Rectangle {
-                        color: "#FFD063"
+                        color: Theme.accent
                         implicitHeight: 2
                         Layout.fillWidth: true
                     }
@@ -207,7 +208,7 @@ Scope {
 
                             Rectangle {
                                 anchors.fill: parent
-                                color: appRow.selected ? "#292C30" : "transparent"
+                                color: appRow.selected ? Theme.raised : "transparent"
 
                                 // Accent bar on the selected row.
                                 Rectangle {
@@ -215,7 +216,7 @@ Scope {
                                     anchors.top: parent.top
                                     anchors.bottom: parent.bottom
                                     width: 3
-                                    color: "#FFD063"
+                                    color: Theme.accent
                                     visible: appRow.selected
                                 }
 
@@ -236,7 +237,7 @@ Scope {
 
                                         Text {
                                             text: appRow.modelData.name
-                                            color: appRow.selected ? "#FFD063" : "#EEEEEE"
+                                            color: appRow.selected ? Theme.accent : Theme.text
                                             font.pointSize: 12
                                             elide: Text.ElideRight
                                             Layout.fillWidth: true
@@ -245,7 +246,7 @@ Scope {
                                         Text {
                                             visible: text.length > 0
                                             text: appRow.modelData.genericName || appRow.modelData.comment || ""
-                                            color: "#7A7B7D"
+                                            color: Theme.muted
                                             font.pointSize: 9
                                             elide: Text.ElideRight
                                             Layout.fillWidth: true
@@ -259,7 +260,7 @@ Scope {
             }
 
             Rectangle {
-                color: "#FFD063"
+                color: Theme.accent
                 implicitHeight: 5
                 Layout.fillWidth: true
             }

dotfiles/quickshell/widgets/notifications/NotificationPopup.qml

@@ -2,6 +2,7 @@ import Quickshell.Services.Notifications
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.widgets.theme
 
 ColumnLayout {
     id: root
@@ -12,7 +13,7 @@ ColumnLayout {
     Layout.fillWidth: true
 
     Rectangle {
-        color: "#FFD063"
+        color: Theme.accent
         implicitHeight: 5
 
         Layout.fillWidth: true
@@ -23,8 +24,8 @@ ColumnLayout {
 
         margin: 12
         border.width: 1
-        border.color: "#FFD063"
-        color: "#0F1012"
+        border.color: Theme.accent
+        color: Theme.surface
         opacity: .9
 
         ColumnLayout {
@@ -45,7 +46,7 @@ ColumnLayout {
 
                 Text {
                     text: root.modelData.summary
-                    color: "#EEEEEE"
+                    color: Theme.text
                     font.pointSize: 14
                     font.bold: true
                     elide: Text.ElideRight
@@ -57,7 +58,7 @@ ColumnLayout {
                     id: dismissButton
 
                     text: "×"
-                    color: "#FFD063"
+                    color: Theme.accent
                     font.pointSize: 18
 
                     MouseArea {
@@ -71,7 +72,7 @@ ColumnLayout {
             Text {
                 visible: root.modelData.body !== ""
                 text: root.modelData.body
-                color: "#EEEEEE"
+                color: Theme.text
                 font.pointSize: 12
                 wrapMode: Text.Wrap
 
@@ -92,9 +93,9 @@ ColumnLayout {
 
                         required property NotificationAction modelData
 
-                        color: "#292C30"
+                        color: Theme.raised
                         border.width: 1
-                        border.color: "#FFD063"
+                        border.color: Theme.accent
                         implicitHeight: 28
                         implicitWidth: actionText.implicitWidth + 16
 
@@ -102,7 +103,7 @@ ColumnLayout {
                             id: actionText
                             anchors.centerIn: parent
                             text: actionButton.modelData.text
-                            color: "#EEEEEE"
+                            color: Theme.text
                             font.pointSize: 12
                         }
 

dotfiles/quickshell/widgets/osd/VolumeOsd.qml

@@ -2,6 +2,7 @@ import Quickshell
 import Quickshell.Services.Pipewire
 import Quickshell.Wayland
 import QtQuick
+import qs.widgets.theme
 
 Scope {
     id: root
@@ -68,7 +69,7 @@ Scope {
             anchors.bottomMargin: 4
 
             text: Math.round(Math.min(root.volume, root.maxVolume) * 100) + "%"
-            color: !root.muted && root.volume > 1 ? "#FF6B4A" : "#FFD063"
+            color: !root.muted && root.volume > 1 ? Theme.hot : Theme.accent
             font.pointSize: 12
             font.bold: true
         }
@@ -84,7 +85,7 @@ Scope {
                 anchors.centerIn: parent
                 implicitHeight: 6
                 width: parent.width * Math.min(root.volume, root.maxVolume) / root.maxVolume
-                color: "#FF6B4A"
+                color: Theme.hot
                 visible: !root.muted && root.volume > 1
 
                 Behavior on width {
@@ -98,7 +99,7 @@ Scope {
                 anchors.centerIn: parent
                 implicitHeight: 6
                 width: parent.width * Math.min(root.volume, 1) / root.maxVolume
-                color: root.muted ? "#7A7B7D" : "#FFD063"
+                color: root.muted ? Theme.muted : Theme.accent
 
                 Behavior on width {
                     NumberAnimation {

dotfiles/quickshell/widgets/sidebar/SideBar.qml

@@ -8,6 +8,7 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Shapes
+import qs.widgets.theme
 
 // A vertical sidebar carrying the "Slant" (launcher V6) visual language —
 // chamfered panel, thick trapezoid bevel accents, an outward bracket, a
@@ -81,8 +82,8 @@ Scope {
                 // Panel: big chamfers on top-right & bottom-left, small bevels
                 // on top-left & bottom-right (mirror of the left-anchored panel).
                 ShapePath {
-                    fillColor: "#0F1012"
-                    strokeColor: "#FFD063"
+                    fillColor: Theme.surface
+                    strokeColor: Theme.accent
                     strokeWidth: 2
 
                     startX: panelShape.width - frame.chamfer
@@ -124,7 +125,7 @@ Scope {
                 // Thick top-right bevel accent (trapezoid to the edges).
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: frame.chamfer
@@ -149,7 +150,7 @@ Scope {
                 // Thick bottom-left bevel accent.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: 0
                     startY: panelShape.height - frame.chamfer
@@ -174,7 +175,7 @@ Scope {
                 // Floating triangle cap in the bottom-left notch.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: 0
                     startY: panelShape.height
@@ -197,7 +198,7 @@ Scope {
                 // corner following the small chamfer.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: 0
                     startY: frame.armSide
@@ -245,15 +246,15 @@ Scope {
                 anchors.rightMargin: 8
                 spacing: 10
 
-                // Clock — Digital-7, hh over mm
+                // Clock — readout font, hh over mm
                 Text {
                     Layout.alignment: Qt.AlignHCenter
                     horizontalAlignment: Text.AlignHCenter
                     text: Qt.formatDateTime(clock.date, "hh\nmm")
-                    font.family: "Digital-7 Mono"
+                    font.family: Theme.readoutFont
                     font.pointSize: 22
                     font.letterSpacing: 1
-                    color: "#EEEEEE"
+                    color: Theme.text
 
                     SystemClock {
                         id: clock
@@ -266,9 +267,9 @@ Scope {
                     Layout.alignment: Qt.AlignHCenter
                     horizontalAlignment: Text.AlignHCenter
                     text: Qt.formatDateTime(clock.date, "dd\nMMM").toUpperCase()
-                    font.family: "Digital-7 Mono"
+                    font.family: Theme.readoutFont
                     font.pointSize: 13
-                    color: "#FFD063"
+                    color: Theme.accent
                 }
 
                 // Slanted divider
@@ -282,7 +283,7 @@ Scope {
                         preferredRendererType: Shape.CurveRenderer
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 8
                             startY: 0
                             PathLine { x: divider.width; y: 0 }
@@ -301,9 +302,9 @@ Scope {
                 Text {
                     Layout.alignment: Qt.AlignHCenter
                     text: "VOL"
-                    font.family: "Digital-7 Mono"
+                    font.family: Theme.readoutFont
                     font.pointSize: 10
-                    color: "#7A7B7D"
+                    color: Theme.muted
                 }
 
                 ColumnLayout {
@@ -336,8 +337,8 @@ Scope {
 
                                 ShapePath {
                                     strokeWidth: 1
-                                    strokeColor: "#7A7B7D"
-                                    fillColor: "#292C30"
+                                    strokeColor: Theme.muted
+                                    fillColor: Theme.raised
 
                                     startX: seg.chamfer
                                     startY: 0
@@ -375,7 +376,7 @@ Scope {
 
                                     ShapePath {
                                         strokeWidth: 0
-                                        fillColor: "#FF6B4A"
+                                        fillColor: Theme.hot
                                         startX: segFill.chamfer
                                         startY: 0
                                         PathLine { x: segFill.width; y: 0 }
@@ -407,8 +408,8 @@ Scope {
 
                             ShapePath {
                                 strokeWidth: 1
-                                strokeColor: "#7A7B7D"
-                                fillColor: "#292C30"
+                                strokeColor: Theme.muted
+                                fillColor: Theme.raised
 
                                 startX: volMeter.chamfer
                                 startY: 0
@@ -448,7 +449,7 @@ Scope {
 
                                 ShapePath {
                                     strokeWidth: 0
-                                    fillColor: root.muted ? "#7A7B7D" : "#FFD063"
+                                    fillColor: root.muted ? Theme.muted : Theme.accent
                                     startX: vol.chamfer
                                     startY: 0
                                     PathLine { x: vol.width; y: 0 }
@@ -466,9 +467,9 @@ Scope {
                 Text {
                     Layout.alignment: Qt.AlignHCenter
                     text: root.muted ? "--" : Math.round(root.volume * 100)
-                    font.family: "Digital-7 Mono"
+                    font.family: Theme.readoutFont
                     font.pointSize: 14
-                    color: root.muted ? "#7A7B7D" : "#EEEEEE"
+                    color: root.muted ? Theme.muted : Theme.text
                 }
             }
         }

dotfiles/quickshell/widgets/systray/SysTray.qml

@@ -6,10 +6,11 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Shapes
+import qs.widgets.theme
 
 // The right bar: a compact utility strip for the SystemTray icons, styled
 // in the same family as the Launcher (V6 "Slant") and SideBar — accent
-// color, chamfered corners, Digital-7 Mono, the slash-trio motif — but with
+// color, chamfered corners, the readout font, the slash-trio motif — but with
 // its own plain, evenly-chamfered panel rather than their ornate
 // bracket-and-cap silhouette, since this is a secondary/utility bar rather
 // than a hero surface.
@@ -54,8 +55,8 @@ Scope {
                     preferredRendererType: Shape.CurveRenderer
 
                     ShapePath {
-                        fillColor: "#0F1012"
-                        strokeColor: "#FFD063"
+                        fillColor: Theme.surface
+                        strokeColor: Theme.accent
                         strokeWidth: 2
 
                         startX: frame.chamfer
@@ -114,7 +115,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 6
                             startY: 0
                             PathLine { x: 10; y: 0 }
@@ -124,7 +125,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 15
                             startY: 0
                             PathLine { x: 19; y: 0 }
@@ -134,7 +135,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 24
                             startY: 0
                             PathLine { x: 28; y: 0 }
@@ -155,7 +156,7 @@ Scope {
                             preferredRendererType: Shape.CurveRenderer
                             ShapePath {
                                 strokeWidth: 0
-                                fillColor: "#FFD063"
+                                fillColor: Theme.accent
                                 startX: 8
                                 startY: 0
                                 PathLine { x: divider.width; y: 0 }
@@ -169,9 +170,9 @@ Scope {
                     Text {
                         Layout.alignment: Qt.AlignHCenter
                         text: "TRAY"
-                        font.family: "Digital-7 Mono"
+                        font.family: Theme.readoutFont
                         font.pointSize: 12
-                        color: "#7A7B7D"
+                        color: Theme.muted
                     }
 
                     ListView {
@@ -201,17 +202,17 @@ Scope {
                         Layout.alignment: Qt.AlignHCenter
                         visible: SystemTray.items.values.length === 0
                         text: "--"
-                        font.family: "Digital-7 Mono"
+                        font.family: Theme.readoutFont
                         font.pointSize: 14
-                        color: "#7A7B7D"
+                        color: Theme.muted
                     }
 
                     Text {
                         Layout.alignment: Qt.AlignHCenter
                         text: SystemTray.items.values.length
-                        font.family: "Digital-7 Mono"
+                        font.family: Theme.readoutFont
                         font.pointSize: 16
-                        color: "#EEEEEE"
+                        color: Theme.text
                     }
                 }
             }

dotfiles/quickshell/widgets/systray/SysTrayItem.qml

@@ -2,6 +2,7 @@ import Quickshell
 import Quickshell.Services.SystemTray
 import QtQuick
 import QtQuick.Shapes
+import qs.widgets.theme
 
 // A single tray icon, chamfered to match the Slant (launcher V6 / SideBar)
 // visual language instead of a plain rectangular hit target.
@@ -35,8 +36,8 @@ MouseArea {
 
         ShapePath {
             strokeWidth: 1
-            strokeColor: root.containsMouse ? "#FFD063" : "#7A7B7D"
-            fillColor: "#292C30"
+            strokeColor: root.containsMouse ? Theme.accent : Theme.muted
+            fillColor: Theme.raised
 
             startX: root.chamfer
             startY: 0

dotfiles/quickshell/widgets/theme/Theme.qml

@@ -0,0 +1,61 @@
+pragma Singleton
+
+import Quickshell
+import QtQuick
+
+// Single source of truth for the shell's palette and font families.
+//
+// The shell previously ran two unrelated palettes: an amber one (#FFD063) used
+// by the launchers, sidebar, systray, vitals and notifications, and an orange
+// one (#e8722a) that only the dense bar had, tokenized as per-file properties.
+// This unifies on the ORANGE values under the AMBER naming scheme.
+//
+// `surface` deliberately takes the dense bar's void (#0a0a0a) rather than the
+// old panel background (#0F1012), which also absorbs the near-identical
+// #0A0A0C scrim.
+Singleton {
+    // ---- core ----
+    readonly property color accent: "#e8722a"   // was #FFD063 (amber) / #e8722a (bar)
+    readonly property color text: "#dedede"     // was #EEEEEE / #dedede
+    readonly property color muted: "#858585"    // was #7A7B7D / #858585
+    readonly property color surface: "#0a0a0a"  // was #0F1012 + #0A0A0C + #0a0a0a
+    readonly property color hot: "#ff6b4a"      // alert/hot; no bar equivalent, kept
+
+    // ---- supporting darks ----
+    // A three-step ramp above `surface`. `raised` also absorbs #22262C, which
+    // differed from #292C30 by an imperceptible amount across two call sites.
+    readonly property color selection: "#1a1c1f"  // selected row fill
+    readonly property color raised: "#292c30"     // raised surface / border
+    readonly property color disabled: "#3a3d42"   // unknown / disabled stroke
+
+    // ---- accents ----
+    // The pale "flash" the top/bottom bars show while a launcher is open. Was a
+    // hand-picked #FFF3C0 against amber; derived here so it tracks `accent`.
+    // 55% toward white reproduces the original amber relationship closely
+    // (#FFD063 -> #FFE9B8 vs the hand-picked #FFF3C0).
+    readonly property color accentSoft: Qt.tint(accent, Qt.rgba(1, 1, 1, 0.55))
+    readonly property color highlight: "#ffffff"
+
+    // ---- fonts ----
+    // Two faces. `readoutFont` is an alias rather than a second literal so the
+    // two roles cannot silently drift apart; point it at a different family if
+    // the readouts should ever diverge from the headings again.
+    //
+    // Installed by services/desktop/desktop-apps.nix (nerd-fonts.departure-mono).
+    // The former readout face, Digital-7 Mono, was never packaged — it relied on
+    // a manual ~/.dots/fonts/digital_7 install, so dropping it also removes an
+    // undeclared external dependency.
+    readonly property string displayFont: "DepartureMono Nerd Font" // headings, large values
+    readonly property string readoutFont: displayFont               // seven-segment readouts: launchers, sidebar, systray, vitals
+    readonly property string microFont: "DejaVu Sans Mono"          // dense bar micro labels
+
+    // ---- derived alpha variants ----
+    // The dense bar hand-encoded these as Qt.rgba(0.87,0.87,0.87,a) = text and
+    // Qt.rgba(0.91,0.45,0.16,a) = accent. Expressed as functions so the
+    // relationship survives a palette change.
+    function textAlpha(a) { return Qt.rgba(text.r, text.g, text.b, a); }
+    function accentAlpha(a) { return Qt.rgba(accent.r, accent.g, accent.b, a); }
+
+    // Hairline rule / panel outline: text at 28%.
+    readonly property color hair: textAlpha(0.28)
+}

dotfiles/quickshell/widgets/vitals/VitalBar.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Shapes
+import qs.widgets.theme
 
 // Horizontal meter in the Slant language: a chamfered track whose fill is a
 // clipped copy of the SAME hexagon, so empty and full always share one
@@ -26,8 +27,8 @@ Item {
 
         ShapePath {
             strokeWidth: 1
-            strokeColor: bar.unknown ? "#3A3D42" : "#7A7B7D"
-            fillColor: "#292C30"
+            strokeColor: bar.unknown ? Theme.disabled : Theme.muted
+            fillColor: Theme.raised
 
             startX: bar.chamfer
             startY: 0
@@ -72,7 +73,7 @@ Item {
 
             ShapePath {
                 strokeWidth: 0
-                fillColor: bar.hot ? "#FF6B4A" : "#FFD063"
+                fillColor: bar.hot ? Theme.hot : Theme.accent
 
                 Behavior on fillColor {
                     ColorAnimation {

dotfiles/quickshell/widgets/vitals/Vitals.qml

@@ -6,6 +6,7 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Shapes
+import qs.widgets.theme
 
 // Host vitals HUD — the "Slant" language (chamfered panel, trapezoid bevels,
 // outward corner chunks, floating cap, slanted dividers) carried over from the
@@ -59,7 +60,7 @@ Scope {
         // Dim backdrop — click anywhere to dismiss.
         Rectangle {
             anchors.fill: parent
-            color: "#0A0A0C"
+            color: Theme.surface
             opacity: 0.5
 
             MouseArea {
@@ -102,8 +103,8 @@ Scope {
                 preferredRendererType: Shape.CurveRenderer
 
                 ShapePath {
-                    fillColor: "#0F1012"
-                    strokeColor: "#FFD063"
+                    fillColor: Theme.surface
+                    strokeColor: Theme.accent
                     strokeWidth: 2
 
                     startX: frame.chamfer
@@ -121,7 +122,7 @@ Scope {
                 // Thick top-left bevel accent.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: 0
                     startY: frame.chamfer
@@ -134,7 +135,7 @@ Scope {
                 // Thick bottom-right bevel accent.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: panelShape.height - frame.chamfer
@@ -147,7 +148,7 @@ Scope {
                 // Floating triangle cap in the bottom-right notch.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: panelShape.height
@@ -159,7 +160,7 @@ Scope {
                 // Heavy outward chunk wrapping the bottom-left corner.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width / 3
                     startY: panelShape.height
@@ -176,7 +177,7 @@ Scope {
                 // Heavy outward chunk wrapping the top-right corner.
                 ShapePath {
                     strokeWidth: 0
-                    fillColor: "#FFD063"
+                    fillColor: Theme.accent
 
                     startX: panelShape.width
                     startY: panelShape.height / 3
@@ -217,7 +218,7 @@ Scope {
 
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 6
                             startY: 0
                             PathLine { x: 10; y: 0 }
@@ -227,7 +228,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 15
                             startY: 0
                             PathLine { x: 19; y: 0 }
@@ -237,7 +238,7 @@ Scope {
                         }
                         ShapePath {
                             strokeWidth: 0
-                            fillColor: "#FFD063"
+                            fillColor: Theme.accent
                             startX: 24
                             startY: 0
                             PathLine { x: 28; y: 0 }
@@ -249,8 +250,8 @@ Scope {
 
                     Text {
                         text: (vitals.host || "vitals").toUpperCase()
-                        color: "#EEEEEE"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.text
+                        font.family: Theme.readoutFont
                         font.pointSize: 20
                         font.letterSpacing: 2
                     }
@@ -261,15 +262,15 @@ Scope {
 
                     Text {
                         text: "UP"
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 11
                     }
 
                     Text {
                         text: vitals.fmtUptime(vitals.uptime)
-                        color: "#FFD063"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.accent
+                        font.family: Theme.readoutFont
                         font.pointSize: 16
                     }
                 }
@@ -281,8 +282,8 @@ Scope {
                     Layout.fillWidth: true
                     visible: vitals.failed
                     text: "NODE_EXPORTER UNREACHABLE ON :" + vitals.port
-                    color: "#FF6B4A"
-                    font.family: "Digital-7 Mono"
+                    color: Theme.hot
+                    font.family: Theme.readoutFont
                     font.pointSize: 13
                 }
 
@@ -353,7 +354,7 @@ Scope {
                             Text {
                                 Layout.preferredWidth: 96
                                 text: diskRow.modelData.mount
-                                color: "#7A7B7D"
+                                color: Theme.muted
                                 font.pointSize: 9
                                 elide: Text.ElideMiddle
                             }
@@ -369,8 +370,8 @@ Scope {
                                 Layout.preferredWidth: 48
                                 horizontalAlignment: Text.AlignRight
                                 text: Math.round(diskRow.frac * 100) + "%"
-                                color: diskRow.frac >= 0.9 ? "#FF6B4A" : "#EEEEEE"
-                                font.family: "Digital-7 Mono"
+                                color: diskRow.frac >= 0.9 ? Theme.hot : Theme.text
+                                font.family: Theme.readoutFont
                                 font.pointSize: 13
                             }
 
@@ -378,8 +379,8 @@ Scope {
                                 Layout.preferredWidth: 104
                                 horizontalAlignment: Text.AlignRight
                                 text: vitals.fmtBytes(diskRow.modelData.size - diskRow.modelData.used) + " FREE"
-                                color: "#7A7B7D"
-                                font.family: "Digital-7 Mono"
+                                color: Theme.muted
+                                font.family: Theme.readoutFont
                                 font.pointSize: 11
                             }
                         }
@@ -399,21 +400,21 @@ Scope {
                     Text {
                         Layout.preferredWidth: 96
                         text: vitals.netIface || "NET"
-                        color: "#7A7B7D"
+                        color: Theme.muted
                         font.pointSize: 9
                     }
 
                     Text {
                         text: "RX"
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 11
                     }
 
                     Text {
                         text: vitals.fmtRate(vitals.netRx)
-                        color: "#FFD063"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.accent
+                        font.family: Theme.readoutFont
                         font.pointSize: 14
                     }
 
@@ -423,15 +424,15 @@ Scope {
 
                     Text {
                         text: "TX"
-                        color: "#7A7B7D"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.muted
+                        font.family: Theme.readoutFont
                         font.pointSize: 11
                     }
 
                     Text {
                         text: vitals.fmtRate(vitals.netTx)
-                        color: "#FFD063"
-                        font.family: "Digital-7 Mono"
+                        color: Theme.accent
+                        font.family: Theme.readoutFont
                         font.pointSize: 14
 
                         // Right-align the TX readout against the panel edge the
@@ -469,8 +470,8 @@ Scope {
             Text {
                 Layout.preferredWidth: 46
                 text: metric.label
-                color: "#FFD063"
-                font.family: "Digital-7 Mono"
+                color: Theme.accent
+                font.family: Theme.readoutFont
                 font.pointSize: 15
                 font.letterSpacing: 1
             }
@@ -486,8 +487,8 @@ Scope {
                 Layout.preferredWidth: 54
                 horizontalAlignment: Text.AlignRight
                 text: metric.readout
-                color: "#EEEEEE"
-                font.family: "Digital-7 Mono"
+                color: Theme.text
+                font.family: Theme.readoutFont
                 font.pointSize: 16
             }
         }
@@ -499,8 +500,8 @@ Scope {
 
             Text {
                 text: metric.detail
-                color: "#7A7B7D"
-                font.family: "Digital-7 Mono"
+                color: Theme.muted
+                font.family: Theme.readoutFont
                 font.pointSize: 11
             }
 
@@ -511,8 +512,8 @@ Scope {
             Text {
                 visible: metric.aside.length > 0
                 text: metric.aside
-                color: metric.asideHot ? "#FF6B4A" : "#7A7B7D"
-                font.family: "Digital-7 Mono"
+                color: metric.asideHot ? Theme.hot : Theme.muted
+                font.family: Theme.readoutFont
                 font.pointSize: 11
             }
         }
@@ -530,7 +531,7 @@ Scope {
 
             ShapePath {
                 strokeWidth: 0
-                fillColor: "#FFD063"
+                fillColor: Theme.accent
                 startX: 6
                 startY: 0
                 PathLine { x: divider.width; y: 0 }

flake.nix

@@ -552,5 +552,113 @@
             machine.crash()
           '';
         };
+
+      # `nix develop` — hot-reload loop for dotfiles/quickshell.
+      #
+      # hosts/terra/home.nix ships the shell via `xdg.configFile."quickshell"`,
+      # which COPIES the tree into the store, so ~/.config/quickshell is a
+      # read-only symlink into /nix/store and every QML tweak costs a
+      # nixos-rebuild. quickshell DOES hot-reload on file save — but only for
+      # the files it is watching, which are those frozen store copies. Pointing
+      # it at the working tree with `qs -p` restores edit-save-see, no rebuild.
+      #
+      # quickshell keys instance identity on the CONFIG PATH, so a working-tree
+      # instance and the store-backed one are two different instances that would
+      # both map layer-shell bars onto every output. Hence a swap, not a second
+      # instance — and the swap starts dev FIRST, killing the packaged shell
+      # only once dev is confirmed up, so a QML error in the working tree leaves
+      # you on your normal bar instead of no bar at all.
+      #
+      # Every kill is scoped to one config (`qs kill` = default only, `qs kill
+      # -p` = that path only). A blanket kill would also take out unrelated
+      # quickshell instances — pkgs/rishot.nix is one.
+      #
+      # Deliberately NOT wired to direnv (no .envrc in this repo): programs.direnv
+      # is enabled for this user, so a `use flake` would swap the running desktop
+      # shell on every `cd` into the checkout, including over ssh.
+      devShells.${system}.default =
+        let
+          pkgs = nixpkgs.legacyPackages.${system};
+          # Same nixpkgs terra's home.nix takes pkgs.quickshell from, so the dev
+          # instance is the identical build to the packaged one.
+          qs = "${nixpkgs.legacyPackages.${system}.quickshell}/bin/qs";
+          git = "${nixpkgs.legacyPackages.${system}.git}/bin/git";
+
+          # Resolved at RUN time, not build time: the entire point is to run the
+          # working tree, and `self` here is only a store snapshot of it.
+          preamble = ''
+            root="$(${git} rev-parse --show-toplevel 2>/dev/null || pwd)"
+            cfg="$root/dotfiles/quickshell"
+            if [ ! -f "$cfg/shell.qml" ]; then
+              echo "no shell.qml under $cfg — run this from the homelab checkout" >&2
+              exit 1
+            fi
+            # `qs list` exits 0 whether or not it found anything, and only emits
+            # json when it did — so "json came back" is the liveness test.
+            running() { ${qs} list -p "$1" -j 2>/dev/null | grep -q '"id"'; }
+            prod_running() { ${qs} list -j 2>/dev/null | grep -q '"id"'; }
+          '';
+
+          qs-dev = pkgs.writeShellScriptBin "qs-dev" ''
+            set -uo pipefail
+            ${preamble}
+
+            if [ -z "''${WAYLAND_DISPLAY:-}" ]; then
+              echo "qs-dev: no WAYLAND_DISPLAY — refusing to swap the desktop shell" >&2
+              exit 1
+            fi
+
+            if running "$cfg"; then
+              echo "qs-dev: already running from $cfg"
+              exit 0
+            fi
+
+            ${qs} -d -p "$cfg"
+
+            # Confirm it came up before touching the packaged shell.
+            for _ in $(seq 1 50); do
+              running "$cfg" && break
+              sleep 0.1
+            done
+
+            if ! running "$cfg"; then
+              echo "qs-dev: dev shell failed to start — packaged shell left alone" >&2
+              echo "qs-dev: run 'qs -p $cfg' in the foreground to see the QML error" >&2
+              exit 1
+            fi
+
+            ${qs} kill || true
+            echo "qs-dev: live on $cfg — edits there now hot-reload"
+          '';
+
+          qs-prod = pkgs.writeShellScriptBin "qs-prod" ''
+            set -uo pipefail
+            ${preamble}
+
+            running "$cfg" && ${qs} kill -p "$cfg" || true
+            prod_running || ${qs} -d
+            echo "qs-prod: back on ~/.config/quickshell"
+          '';
+        in
+        pkgs.mkShell {
+          packages = [ pkgs.quickshell qs-dev qs-prod ];
+
+          # Swap on entry, swap back on exit. Three guards:
+          #   - interactive only ($- has i). `nix develop --command X` EXECs X,
+          #     replacing the shell that set the trap, so the restore would
+          #     never run and you'd be left on the dev instance. Non-interactive
+          #     use gets the explicit `nix develop -c qs-dev` instead.
+          #   - WAYLAND_DISPLAY, so entering the shell over ssh cannot kill the
+          #     desktop's bar and leave nothing in its place.
+          #   - a sentinel, so a nested `nix develop` does not swap (and then
+          #     restore) a second time.
+          shellHook = ''
+            if [[ $- == *i* ]] && [ -n "''${WAYLAND_DISPLAY:-}" ] && [ -z "''${HOMELAB_QS_DEV:-}" ]; then
+              export HOMELAB_QS_DEV=1
+              qs-dev && trap qs-prod EXIT
+            fi
+            echo "homelab devshell — qs-dev (working tree) / qs-prod (packaged); exit restores"
+          '';
+        };
     };
 }

tools/quickshell-preview/Dockerfile

@@ -0,0 +1,38 @@
+# syntax=docker/dockerfile:1
+FROM nixos/nix:2.30.2
+
+ARG NIXPKGS_REV=e5bdc4a41d4c072fe1e3787eaa0320a384741d44
+ARG QSMCP_REV=76b1b008f0352064121af9334065012e31d80fc2
+
+ENV NIX_CONFIG="experimental-features = nix-command flakes" \
+    PATH="/nix/var/nix/profiles/default/bin:${PATH}"
+
+RUN nix profile install --profile /nix/var/nix/profiles/default \
+      "github:NixOS/nixpkgs/${NIXPKGS_REV}#quickshell" \
+      "github:NixOS/nixpkgs/${NIXPKGS_REV}#nodejs_22"
+
+RUN mkdir -p /opt/qsmcp \
+    && git init /opt/qsmcp \
+    && git -C /opt/qsmcp remote add origin https://github.com/fedsfarm/qsmcp.git \
+    && git -C /opt/qsmcp fetch --depth 1 origin "${QSMCP_REV}" \
+    && git -C /opt/qsmcp checkout --detach FETCH_HEAD \
+    && test "$(git -C /opt/qsmcp rev-parse HEAD)" = "${QSMCP_REV}" \
+    && cd /opt/qsmcp \
+    && npm ci --omit=dev \
+    && rm -rf /opt/qsmcp/.git
+
+# qsmcp's CLI hard-codes a 1568px safety cap. Desktop bar previews need their
+# true target width so responsive layout and text collisions are testable.
+RUN node -e 'const fs=require("fs"); const p="/opt/qsmcp/src/index.ts"; const s=fs.readFileSync(p,"utf8"); const old="max_dimension: 1568"; if (!s.includes(old)) throw new Error("qsmcp max_dimension source changed"); fs.writeFileSync(p,s.replace(old,"max_dimension: 4096"))'
+
+ENV QSMCP_SHELL_ROOT=/workspace/quickshell \
+    QSMCP_QS_BIN=/nix/var/nix/profiles/default/bin/qs \
+    QT_QUICK_BACKEND=software
+
+COPY entrypoint.sh /usr/local/bin/quickshell-preview
+RUN chmod +x /usr/local/bin/quickshell-preview
+
+RUN mkdir -p /workspace/quickshell
+WORKDIR /workspace/quickshell
+
+ENTRYPOINT ["/usr/local/bin/quickshell-preview"]

tools/quickshell-preview/README.md

@@ -0,0 +1,39 @@
+# Headless Quickshell previews
+
+This directory provides a reproducible Docker wrapper around
+[qsmcp](https://github.com/fedsfarm/qsmcp). It renders a Quickshell `Item` to a
+PNG with Qt's `grabToImage()` without connecting to the host Wayland session.
+
+Both nixpkgs and qsmcp are pinned in `Dockerfile`. The runner uses
+`docker create` plus `docker cp` rather than bind mounts, so it also works with
+rootless/remote daemons whose mount namespace cannot see the checkout.
+
+## Smoke test
+
+Start Docker, then run from the repository root:
+
+```sh
+./tools/quickshell-preview/render.sh
+```
+
+The default output is:
+
+```text
+/tmp/homelab-quickshell-preview/smoke.png
+```
+
+## Render another Item-rooted component
+
+```sh
+./tools/quickshell-preview/render.sh \
+  tests/DenseBarHeadless.qml \
+  .artifacts/quickshell-preview/dense-bar-1920.png \
+  1920 164
+```
+
+The component path is relative to `dotfiles/quickshell`. Keep production
+`PanelWindow` wrappers thin and put their visual content in an `Item` component
+so it can be rendered through this offscreen path.
+
+`PanelWindow`-rooted previews require a nested compositor and are intentionally
+outside this first smoke-test image.

tools/quickshell-preview/entrypoint.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+mkdir -p /tmp/qsmcp-runtime /tmp/qsmcp-home /output
+chmod 700 /tmp/qsmcp-runtime
+
+export HOME=/tmp/qsmcp-home
+export XDG_RUNTIME_DIR=/tmp/qsmcp-runtime
+
+exec /nix/var/nix/profiles/default/bin/node \
+    /opt/qsmcp/src/index.ts render "$@"

tools/quickshell-preview/render.sh

@@ -0,0 +1,58 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+repo_root="$(git -C "$(dirname "${BASH_SOURCE[0]}")" rev-parse --show-toplevel)"
+tool_dir="$repo_root/tools/quickshell-preview"
+shell_root="$repo_root/dotfiles/quickshell"
+image="homelab-quickshell-preview:qsmcp-76b1b008"
+
+component="${1:-tests/HeadlessSmoke.qml}"
+output="${2:-${TMPDIR:-/tmp}/homelab-quickshell-preview/smoke.png}"
+width="${3:-720}"
+height="${4:-120}"
+
+if ! docker info >/dev/null 2>&1; then
+    echo "error: Docker-compatible daemon is unavailable" >&2
+    exit 69
+fi
+
+case "$output" in
+    /*) ;;
+    *) output="$PWD/$output" ;;
+esac
+
+output_dir="$(dirname "$output")"
+output_name="$(basename "$output")"
+mkdir -p "$output_dir"
+
+container_id=""
+cleanup() {
+    if [[ -n "$container_id" ]]; then
+        docker rm --force "$container_id" >/dev/null 2>&1 || true
+    fi
+}
+trap cleanup EXIT
+
+docker build --tag "$image" --file "$tool_dir/Dockerfile" "$tool_dir"
+
+container_id="$(docker create \
+    --network none \
+    --tmpfs /tmp:rw,noexec,nosuid,size=256m \
+    "$image" \
+    "$component" \
+    --width "$width" \
+    --height "$height" \
+    --dpr 1 \
+    --padding 0 \
+    --background solid \
+    --bg '#0a0a0a' \
+    --out "/output/$output_name")"
+
+# docker cp streams files through the API, so this works with rootless and
+# remote daemons whose filesystem cannot see the client's repository path.
+docker cp "$shell_root/." "$container_id:/workspace/quickshell"
+docker start --attach "$container_id"
+docker cp "$container_id:/output/$output_name" "$output"
+
+test -s "$output"
+printf 'rendered=%s\n' "$output"