Gabriel Brown
cb7c09d208
Appearance now opens on Themes: light and dark side by side, each remembering its own choice, over galleries of ten shipped themes — Tokyo Moon and Day joined by Moon Rose, Catppuccin, Nord, Gruvbox and Everforest in both modes. A theme is a complete palette: the catalog lives in themes.json, Theme.qml reads every color token from the active record, and one render pipeline carries it to kitty, tmux, btop, GTK, Vicinae, Firefox's chrome, and the lock screen. The Theme editor builds new ones from four wells — wheel, hex, or eyedropper — with derived surfaces, a saturation slider, debounced fine-tune, and effects that save with the theme. Custom edits finally keep GNOME's accent, kitty's border, and hyprlock in sync. Wallpapers can be video: mpvpaper per output, hardware-decoded, muted and looped, supervised and respawned. Panama owns the pausing — games, battery, and a bar pill for right now — because the compositor rebuilds full-screen blur for every frame a video wallpaper draws. The lock screen gets a still frame. Titlebars stop lying. GNOME apps get close-only on your chosen side, the maximize and double-click settings are gone, the Settings window obeys the same rules, and its titlebar can be turned off entirely. Typography becomes five labeled dropdowns instead of a wall of samples. Contracts updated and written throughout (165 now); per the redesign workflow none were executed — the full sweep runs once at the end. Claude-Session: https://claude.ai/code/session_01Ms2FbjQy31TVf3CEvQhGM8
187 lines
6.5 KiB
QML
187 lines
6.5 KiB
QML
// Light or dark, as two desktops rather than two words.
|
|
//
|
|
// This is the control reached most often in the whole of Appearance, so it
|
|
// leads the category and it is drawn, not labelled: each card is the scheme's
|
|
// remembered theme -- yours, not the shipped default -- rendered as a bar, a
|
|
// focused window and the text on it. Choosing a side returns to whatever theme
|
|
// you last chose for that side; it never resets you to Moon or Day.
|
|
|
|
import QtQuick
|
|
import qs.config
|
|
import qs.services
|
|
|
|
Row {
|
|
id: root
|
|
|
|
width: parent ? parent.width : 620
|
|
spacing: 14
|
|
|
|
// The record the scheme would land on, which is the honest thing to show.
|
|
// themeForScheme already falls back to the catalog default when the
|
|
// remembered id no longer exists.
|
|
function themeFor(scheme: string): var {
|
|
const id = ThemeProfiles.themeForScheme(scheme);
|
|
const record = ThemeCatalog.byId(id)
|
|
?? ThemeProfiles.customProfiles.find(profile => profile.id === id);
|
|
if (record)
|
|
return record;
|
|
const fallback = ThemeCatalog.byId(scheme === "light"
|
|
? ThemeCatalog.defaultLight : ThemeCatalog.defaultDark);
|
|
return fallback ?? { scheme: scheme, accent: Theme.accent,
|
|
secondary: Theme.accentSecondary, palette: ThemeCatalog.defaultPalette(scheme) };
|
|
}
|
|
|
|
Repeater {
|
|
model: [
|
|
{ scheme: "dark", label: "Dark" },
|
|
{ scheme: "light", label: "Light" },
|
|
]
|
|
|
|
Rectangle {
|
|
id: card
|
|
|
|
required property var modelData
|
|
|
|
readonly property var theme: root.themeFor(card.modelData.scheme)
|
|
readonly property var palette: card.theme.palette
|
|
?? ThemeCatalog.defaultPalette(card.modelData.scheme)
|
|
readonly property bool selected: ThemeProfiles.scheme === card.modelData.scheme
|
|
|
|
width: (root.width - root.spacing) / 2
|
|
implicitHeight: scene.height + caption.height + 4
|
|
radius: Theme.cardRadius + 4
|
|
color: Theme.alpha(Theme.fg, 0.04)
|
|
border.width: 2
|
|
border.color: card.activeFocus
|
|
? Theme.accentSecondary
|
|
: (card.selected ? Theme.accent : Theme.alpha(Theme.fg, 0.13))
|
|
clip: true
|
|
activeFocusOnTab: true
|
|
|
|
Accessible.role: Accessible.Button
|
|
Accessible.name: card.modelData.label + " mode"
|
|
Accessible.description: card.theme.name
|
|
? card.theme.name + (card.selected ? ", selected" : "")
|
|
: ""
|
|
Accessible.focusable: true
|
|
Accessible.focused: card.activeFocus
|
|
|
|
function choose(): void {
|
|
ThemeProfiles.setScheme(card.modelData.scheme);
|
|
}
|
|
|
|
Keys.onReturnPressed: card.choose()
|
|
Keys.onSpacePressed: card.choose()
|
|
|
|
Rectangle {
|
|
id: scene
|
|
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
anchors.margins: 2
|
|
height: 110
|
|
color: card.palette.bg
|
|
border.width: 0
|
|
|
|
Column {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
anchors.margins: 15
|
|
spacing: 10
|
|
|
|
// The bar, edge to edge on the real desktop and so drawn
|
|
// wide and short here.
|
|
Rectangle {
|
|
width: parent.width * 0.6
|
|
height: 8
|
|
radius: 4
|
|
color: card.palette.bgDark
|
|
border.width: 1
|
|
border.color: card.palette.bgHighlight
|
|
}
|
|
|
|
Rectangle {
|
|
width: parent.width
|
|
height: 56
|
|
radius: 8
|
|
color: card.palette.bgPanel
|
|
border.width: 2
|
|
border.color: card.theme.accent
|
|
|
|
Column {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
anchors.margins: 9
|
|
spacing: 6
|
|
|
|
Rectangle {
|
|
width: parent.width * 0.6
|
|
height: 5
|
|
radius: 3
|
|
color: card.palette.fg
|
|
border.width: 0
|
|
}
|
|
|
|
Rectangle {
|
|
width: parent.width * 0.42
|
|
height: 5
|
|
radius: 3
|
|
color: card.palette.fgDim
|
|
border.width: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: caption
|
|
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: scene.bottom
|
|
anchors.leftMargin: 14
|
|
anchors.rightMargin: 12
|
|
height: 34
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.right: tick.left
|
|
anchors.rightMargin: 6
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: card.modelData.label
|
|
+ (card.theme.name ? " · " + card.theme.name : "")
|
|
color: Theme.fg
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSize
|
|
font.weight: Font.DemiBold
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
Text {
|
|
id: tick
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
visible: card.selected
|
|
text: "✓"
|
|
color: Theme.accent
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSize
|
|
font.weight: Font.DemiBold
|
|
}
|
|
}
|
|
|
|
HoverHandler {
|
|
cursorShape: Qt.PointingHandCursor
|
|
}
|
|
|
|
TapHandler {
|
|
onTapped: card.choose()
|
|
}
|
|
}
|
|
}
|
|
}
|