Make the accent colour choosable

Phase 4, first slice. Theme.qml hardcoded the Prism pair, so the one thing that carries every state meaning in the desktop -- focused, active, on -- was the one thing nobody could change. 74 files read Theme.accent, so making it a setting moves all of them at once. Named accents rather than a colour picker, which is the design decision worth defending. One hex cannot serve both schemes: a colour legible on the Moon background is usually illegible on the Day one, and a picker that lets someone build an unreadable desktop is not a feature. So each name carries a curated pair per scheme, and every one of the sixteen resulting colours measures at least 3:1 against the ground it sits on -- checked, not assumed. It is also GNOME's model, which is the parity being chased. The focused window border comes with it, and only because the ownership rule made that safe. ColorScheme owns the inactive border as a scheme-relative contrast role; the focused Prism border is the accent role owned by the theme. Writing it from the accent would have been reckless before that boundary existed, since a scheme change would have erased the user's choice. Both borders are now pushed together, because each accent carries separate light and dark pairs, so switching schemes must restate the focused border too. The gradient is written as a Lua table, not a string. The string form carries only one stop, and passing two as a string is accepted and silently keeps the previous value. Swatches are drawn as the gradient they produce rather than as flat dots, because the gradient is what is being chosen. Each carries its name permanently rather than in a tooltip: telling swatches apart by colour is precisely what someone with a colour vision deficiency cannot do, which is also why the palette is named in the first place. Verified end to end by switching to rose and watching the compositor report eeff757f/eec099ff, then reverting. Claude-Session: https://claude.ai/code/session_01BRvzt4H8XXLPVH5MyYdk9L
2026-08-18 17:02:18 -04:00
parent bd5d030d91
commit c37ca3baee
6 changed files with 172 additions and 10 deletions
@@ -0,0 +1,84 @@
+// Choosing the desktop accent.
+//
+// Each swatch is drawn as the GRADIENT it will actually produce, not a flat
+// dot, because the gradient is the thing being chosen -- the focused window
+// border, the bar hairline and every active state are the two colours meeting.
+// A row of flat circles would misrepresent all of them.
+//
+// Named accents rather than a colour wheel: each name carries a curated pair
+// per scheme, so every choice stays legible in both light and dark. See
+// config/Theme.qml for the palette and the reasoning.
+
+import QtQuick
+import qs.config
+import qs.services
+
+Flow {
+    id: root
+
+    spacing: 10
+
+    readonly property string current: DesktopPreferences.get("accentName") || "blue"
+
+    Repeater {
+        // Object key order is insertion order here, so the palette's own order
+        // is what the user sees; blue first because it is what Panama ships.
+        model: Object.keys(Theme.accents)
+
+        Column {
+            id: entry
+
+            required property var modelData
+
+            readonly property var pair: Theme.accents[entry.modelData]
+            readonly property bool selected: entry.modelData === root.current
+            readonly property color start: Theme.dark ? entry.pair.dark : entry.pair.light
+            readonly property color end: Theme.dark ? entry.pair.darkSecondary : entry.pair.lightSecondary
+
+            spacing: 5
+
+            Rectangle {
+                width: 46
+                height: 46
+                radius: 23
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "transparent"
+                // The ring sits outside the gradient rather than over it, so a
+                // selected swatch still shows its true colours.
+                border.width: entry.selected ? 2 : 1
+                border.color: entry.selected ? Theme.fg : Theme.alpha(Theme.fg, 0.14)
+
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: entry.selected ? 4 : 3
+                    radius: width / 2
+                    border.width: 0
+                    gradient: Gradient {
+                        orientation: Gradient.Horizontal
+                        GradientStop { position: 0.0; color: entry.start }
+                        GradientStop { position: 1.0; color: entry.end }
+                    }
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: SystemSettings.commitPreference("accentName", entry.modelData)
+                }
+            }
+
+            // Always shown, not a tooltip. Telling swatches apart by colour is
+            // exactly what someone with a colour vision deficiency cannot do,
+            // and it is the reason the palette is named rather than freeform --
+            // hiding the names behind a hover would waste that.
+            Text {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: entry.pair.label
+                color: entry.selected ? Theme.fg : Theme.fgMuted
+                font.family: Theme.fontFamily
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: entry.selected ? Font.DemiBold : Font.Normal
+            }
+        }
+    }
+}
@@ -106,7 +106,13 @@ SettingsPage {
            ? ColorScheme.lastError
            : "Light is Tokyo Night Day, the official light variant — the same hues at a different lightness, so the blue-into-orchid signature survives the switch. Applications and window borders follow."

-        ChoiceRow { setting: "colorScheme"; divider: false }
+        ChoiceRow { setting: "colorScheme" }
+
+        // Drawn as the gradient each accent produces rather than a flat dot,
+        // because the gradient is what is being chosen.
+        AccentPicker {
+            width: parent.width
+        }
    }

    SettingsCard {
@@ -61,3 +61,4 @@ PrivacyPage 1.0 PrivacyPage.qml
 RegionPage 1.0 RegionPage.qml
 SearchPicker 1.0 SearchPicker.qml
 OnlineAccountsPage 1.0 OnlineAccountsPage.qml
+AccentPicker 1.0 AccentPicker.qml