gib/Panama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the desktop real themes, video wallpapers, and honest titlebars

Browse Source 
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
This commit is contained in:
Gabriel Brown
2026-08-23 23:39:04 -04:00
parent 7578348db1
commit cb7c09d208
68 changed files with 6115 additions and 1138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/dot/quickshell/modules/settings/AppearancePage.qml
+301 -81
View File
@@ -19,16 +19,25 @@ SettingsPage {
property string expandedPicker: ""
// Which group of cards is on screen. Theme leads deliberately: light and
// Whether the accent's HSV fine-tune is open. Collapsed by default: it is
// six sliders that answer a question the four colour wells above have
// usually already answered.
property bool fineTuneOpen: false
// Which group of cards is on screen. Themes leads deliberately: light and
// dark is the control reached most often, and it used to be the third
// section down, below a wallpaper grid and the whole lock screen.
property string tab: "theme"
property string tab: "themes"
// Arriving from another page that named a section opens on it. Taken once
// rather than bound, so the tabs still work normally afterwards.
// rather than bound, so the tabs still work normally afterwards. The old
// `theme` id still resolves: deep links, IPC calls and muscle memory all
// hold it, and it means the same thing this tab does.
Component.onCompleted: {
const section = ShellState.takeSettingsSection();
if (section !== "")
if (section === "theme")
root.tab = "themes";
else if (section !== "")
root.tab = section;
}
@@ -59,7 +68,8 @@ SettingsPage {
SettingsTabs {
tabs: [
{ value: "theme", label: "Theme" },
{ value: "themes", label: "Themes" },
{ value: "editor", label: "Theme editor" },
{ value: "background", label: "Background" },
{ value: "type", label: "Typography" },
{ value: "windows", label: "Windows" },
@@ -110,6 +120,47 @@ SettingsPage {
}
}
SettingsCard {
visible: root.tab === "background"
title: "Video playback"
subtitle: VideoWallpaper.lastError !== ""
? VideoWallpaper.lastError
: "Videos loop muted and decode on the GPU. Considerate by default — a video wallpaper should never cost you a frame you care about."
TextEntryRow { setting: "videoWallpaperDir"; placeholder: "Videos/Wallpapers" }
ToggleRow { setting: "videoWallpaperPauseOnBattery" }
TextRow {
label: "During games and fullscreen"
detail: "Pauses automatically — not optional, and free"
value: "Automatic"
}
TextRow {
label: "Pause from the bar"
detail: "While a video plays, a pill sits in the bar — one click pauses it, for remote desktop or just quiet"
value: ""
}
TextRow {
label: "Lock screen"
detail: "Uses a still frame of the video — hyprlock cannot play motion"
value: "Still frame"
}
ActionRow {
label: "Look for new videos"
detail: VideoWallpaper.available
? VideoWallpaper.candidates.length + " video" + (VideoWallpaper.candidates.length === 1 ? "" : "s") + " found"
: "mpvpaper is not installed — run panama update to pick it up"
action: "Rescan"
divider: false
enabled: VideoWallpaper.available
onTriggered: VideoWallpaper.rescan()
}
}
SettingsCard {
visible: root.tab === "background"
title: "Lock screen"
@@ -129,45 +180,220 @@ SettingsPage {
ToggleRow { setting: "lockFadeOnEmpty"; divider: false }
}
SettingsCard {
visible: root.tab === "theme"
// Not "Color scheme" any more: the card holds the saved themes as well
// as the scheme, and a theme carries both ends of the accent with it.
title: "Theme"
subtitle: ColorScheme.lastError !== ""
? ColorScheme.lastError
: "Start with Moon, Moon Rose, or Day; saved themes capture the scheme and both ends of the Prism accent."
// ── Themes ──────────────────────────────────────────────────────────────
//
// The gallery is the page, not a card on it. Cards would put a heading and
// a border around each of two lists that are already visually separate, and
// the theme cards themselves are the only surfaces here that need edges.
ThemeProfilePicker {
ThemeModeHero {
visible: root.tab === "themes"
width: parent.width
}
Text {
visible: root.tab === "themes" && ThemeCatalog.lastError !== ""
width: parent.width
text: ThemeCatalog.lastError
color: Theme.warn
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall
wrapMode: Text.WordWrap
}
ThemeGallery {
visible: root.tab === "themes"
width: parent.width
scheme: "dark"
heading: "Dark themes"
}
ThemeGallery {
visible: root.tab === "themes"
width: parent.width
scheme: "light"
heading: "Light themes"
}
// Dashed rather than solid, and the width of the page: this is a door out
// of the gallery, not an eleventh theme in it.
Rectangle {
id: buildLink
visible: root.tab === "themes"
width: parent.width
implicitHeight: buildCopy.implicitHeight + 30
radius: Theme.cardRadius + 2
color: Theme.alpha(Theme.accent, buildHover.hovered ? 0.12 : 0.07)
border.width: buildLink.activeFocus ? 2 : 1
border.color: buildLink.activeFocus
? Theme.accentSecondary : Theme.alpha(Theme.accent, 0.35)
activeFocusOnTab: true
Accessible.role: Accessible.Button
Accessible.name: "Build your own theme"
Accessible.description: "Opens the theme editor"
Accessible.focusable: true
Accessible.focused: buildLink.activeFocus
Keys.onReturnPressed: root.tab = "editor"
Keys.onSpacePressed: root.tab = "editor"
Text {
id: buildGlyph
anchors.left: parent.left
anchors.leftMargin: 17
anchors.verticalCenter: parent.verticalCenter
text: "◐"
color: Theme.accent
font.family: Theme.fontFamily
font.pixelSize: 20
}
Column {
id: buildCopy
anchors.left: buildGlyph.right
anchors.leftMargin: 13
anchors.right: buildArrow.left
anchors.rightMargin: 13
anchors.verticalCenter: parent.verticalCenter
spacing: 3
Text {
width: parent.width
text: "Build your own theme"
color: Theme.fg
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSize
font.weight: Font.DemiBold
}
Text {
width: parent.width
text: "Primary, secondary, background, foreground, effects — every colour yours, saved as a theme that lives in the galleries above"
color: Theme.fgDim
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall
wrapMode: Text.WordWrap
}
}
Text {
id: buildArrow
anchors.right: parent.right
anchors.rightMargin: 17
anchors.verticalCenter: parent.verticalCenter
text: "→"
color: Theme.accent
font.family: Theme.fontFamily
font.pixelSize: 17
}
HoverHandler {
id: buildHover
cursorShape: Qt.PointingHandCursor
}
TapHandler {
onTapped: root.tab = "editor"
}
}
// ── Theme editor ────────────────────────────────────────────────────────
SettingsCard {
id: editorCard
visible: root.tab === "editor"
title: "Your theme"
// The identity of what is being edited, always. Failures get their own
// line below rather than displacing it -- a subtitle that sometimes
// says which theme you are editing and sometimes says something went
// wrong answers neither question reliably.
subtitle: ThemeProfiles.activeProfile.shipped === true
? ThemeProfiles.activeProfile.name
+ " — editing it forks a copy you can name below"
: "Based on " + ThemeProfiles.activeProfile.name
+ " · every change previews live on the real desktop"
Text {
width: parent.width
visible: wells.lastError !== "" || ColorScheme.lastError !== ""
text: wells.lastError !== "" ? wells.lastError : ColorScheme.lastError
color: Theme.warn
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall
wrapMode: Text.WordWrap
bottomPadding: 10
}
ThemeStartChips {
width: parent.width
bottomPadding: 13
}
SegmentRow {
label: "Scheme"
detail: "Flipping sides returns to the theme you last chose there"
options: [{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]
value: ThemeProfiles.scheme
onSelected: value => ThemeProfiles.setScheme(value)
}
Item { width: 1; height: 13 }
ThemeEditorWells {
id: wells
width: parent.width
}
// Drawn as the gradient each accent produces rather than a flat dot,
// because the gradient is what is being chosen.
AccentPicker {
Item { width: 1; height: 13 }
ThemeSaturationRow {
width: parent.width
}
ActionRow {
label: "Fine-tune"
detail: "Hue, saturation and value for each end of the accent"
action: root.fineTuneOpen ? "Close" : "Open"
onTriggered: root.fineTuneOpen = !root.fineTuneOpen
}
AccentEditor {
visible: root.fineTuneOpen
width: parent.width
}
ThemeSaveRow {
width: parent.width
}
}
// One selector for every font. The two always-open lists and the
// open-one-at-a-time disclosure both retire: a closed dropdown per row
// reads as five choices instead of a wall of samples, and each row names
// what it actually controls — the old tab never said which font was the
// shell's and which was the applications'.
SettingsCard {
visible: root.tab === "type"
title: "Shell typography"
subtitle: Fonts.lastError !== ""
? Fonts.lastError
: "Every piece of text in the shell. Samples are drawn in the font they name."
title: "Fonts"
subtitle: {
if (Fonts.lastError !== "")
return Fonts.lastError;
if (DesktopStyle.lastError !== "")
return DesktopStyle.lastError;
return "Each row names what it controls. The menu shows every family in its own face — type to filter.";
}
SliderRow { setting: "interfaceFontSize" }
TextRow {
label: "Interface font"
SettingRow {
label: "Interface"
detail: Fonts.interfaceMissing
? "Not installed on this machine — fontconfig is substituting something else"
: "Used for all shell text"
value: Fonts.interfaceFont
? "Not installed — fontconfig is substituting something else"
: "The shell — bar, dock, notifications, this window"
divider: false
controlWidth: 8
}
FontPicker {
@@ -178,12 +404,13 @@ SettingsPage {
onPicked: family => Fonts.setInterface(family)
}
TextRow {
label: "Icon font"
SettingRow {
label: "Icons"
detail: Fonts.iconMissing
? "Not installed — the shell's glyphs will not draw correctly"
: "Draws the shell's glyphs, so only Nerd Fonts are offered"
value: Fonts.iconFont
: "Glyphs only, never text — needs a Nerd Font"
divider: false
controlWidth: 8
}
FontPicker {
@@ -193,77 +420,68 @@ SettingsPage {
emptyText: "No Nerd Fonts installed"
onPicked: family => Fonts.setIcon(family)
}
}
SettingsCard {
visible: root.tab === "type"
title: "Application typography"
subtitle: DesktopStyle.lastError !== ""
? DesktopStyle.lastError
: "Fonts used by applications that follow the desktop defaults. Open one family at a time to keep the page calm."
ActionRow {
label: "Application font"
detail: DesktopStyle.applicationFont
action: root.expandedPicker === "application-font" ? "Close" : "Choose"
onTriggered: root.expandedPicker = root.expandedPicker === "application-font" ? "" : "application-font"
SettingRow {
label: "Application"
detail: "GTK and libadwaita apps that follow the desktop default"
divider: false
controlWidth: 8
}
FontPicker {
visible: root.expandedPicker === "application-font"
width: parent.width
families: Fonts.interfaceFonts
current: DesktopStyle.applicationFont
emptyText: Fonts.scanning ? "Reading installed fonts…" : "No application fonts found"
onPicked: family => {
if (DesktopStyle.setApplicationFont(family))
root.expandedPicker = "";
}
onPicked: family => DesktopStyle.setApplicationFont(family)
}
SliderRow { setting: "applicationFontSize" }
ActionRow {
label: "Document font"
detail: DesktopStyle.documentFont
action: root.expandedPicker === "document-font" ? "Close" : "Choose"
onTriggered: root.expandedPicker = root.expandedPicker === "document-font" ? "" : "document-font"
SettingRow {
label: "Document"
detail: "Long-form reading, where applications ask for it"
divider: false
controlWidth: 8
}
FontPicker {
visible: root.expandedPicker === "document-font"
width: parent.width
families: Fonts.interfaceFonts
current: DesktopStyle.documentFont
emptyText: Fonts.scanning ? "Reading installed fonts…" : "No document fonts found"
onPicked: family => {
if (DesktopStyle.setDocumentFont(family))
root.expandedPicker = "";
}
onPicked: family => DesktopStyle.setDocumentFont(family)
}
SliderRow { setting: "documentFontSize" }
ActionRow {
label: "Monospace font"
detail: DesktopStyle.monospaceFont
action: root.expandedPicker === "monospace-font" ? "Close" : "Choose"
onTriggered: root.expandedPicker = root.expandedPicker === "monospace-font" ? "" : "monospace-font"
SettingRow {
label: "Monospace"
detail: "Terminals and code, wherever fixed width is asked for"
divider: false
controlWidth: 8
}
FontPicker {
visible: root.expandedPicker === "monospace-font"
width: parent.width
families: Fonts.monospaceFonts
current: DesktopStyle.monospaceFont
emptyText: Fonts.scanning ? "Reading installed fonts…" : "No monospace fonts found"
onPicked: family => {
if (DesktopStyle.setMonospaceFont(family))
root.expandedPicker = "";
}
onPicked: family => DesktopStyle.setMonospaceFont(family)
}
}
SettingsCard {
visible: root.tab === "type"
title: "Sizes"
subtitle: "The interface size moves the shell's whole scale; the rest are per role."
SliderRow { setting: "interfaceFontSize" }
SliderRow { setting: "applicationFontSize" }
SliderRow { setting: "documentFontSize" }
SliderRow { setting: "monospaceFontSize"; divider: false }
}
SettingsCard {
visible: root.tab === "type"
title: "Rendering"
SliderRow { setting: "monospaceFontSize" }
ChoiceRow { setting: "fontHinting" }
ChoiceRow { setting: "fontAntialiasing"; divider: false }
}
@@ -322,11 +540,10 @@ SettingsPage {
SettingsCard {
visible: root.tab === "windows"
title: "Titlebars"
subtitle: "For applications that draw GNOME-compatible titlebars. Hyprland itself does not add titlebar buttons to tiled windows."
subtitle: "One rule for GNOME applications and Panama's own windows. There is no minimize or maximize toggle: Hyprland has no minimize, so the buttons would be lies."
ChoiceRow { setting: "titlebarButtonSide" }
ToggleRow { setting: "titlebarMaximizeButton" }
ChoiceRow { setting: "titlebarDoubleClick"; divider: false }
ToggleRow { setting: "panamaTitlebar" }
ChoiceRow { setting: "titlebarButtonSide"; divider: false }
}
SettingsCard {
@@ -344,10 +561,13 @@ SettingsPage {
SliderRow { setting: "fullscreenOpacity"; divider: false }
}
// Effects belong to the theme now: saving snapshots all ten values into the
// record, and applying a theme that carries them puts them back. They sit
// in the editor rather than beside the galleries for exactly that reason.
SettingsCard {
visible: root.tab === "theme"
visible: root.tab === "editor"
title: "Effects"
subtitle: "Each of these costs frame time. Turning one off is a legitimate way to buy it back while gaming."
subtitle: "Part of your theme — corners, blur, shadows, glow and motion save with it. Each costs frame time; turning one off is a legitimate way to buy it back while gaming."
ToggleRow { setting: "blurEnabled" }
SliderRow { setting: "blurSize" }