Theme pairs with dark mode toggle + gear active state #127

Closed
opened 2026-09-10 02:56:05 +00:00 by fen · 1 comment
Collaborator

Two related UI improvements plus a server-configurable default:

  1. Gear active state: the topbar settings gear highlights like the selected nav tabs when the current page is /settings.

  2. Theme pairs + dark mode toggle: collapse the 10 theme cards into 5 pairs (Midnight, Smooth, Pastel Lavender, Pastel Peach, Pastel Cloud). Each card shows the light variant swatches on the top row and the dark variant swatches on the bottom row. Dark mode toggle in settings next to the theme cards and as a small sun/moon icon button in the topbar. Selecting a pair applies the variant matching the current dark mode state; toggling dark mode switches to the other variant of the selected pair. Persist dark mode in localStorage palette-dark and the pair base id in palette-theme. URL ?theme= still wins and accepts both base and variant ids.

  3. PALETTE_DEFAULT_DARK env var (Docker-configurable): server-configured default dark mode for new visitors. Unset defaults to dark ON; false/0/off turns it off. Precedence: URL ?theme= > stored pair+dark prefs > server default dark > dark on. Documented in README configuration section. Resolution logic covered by Go tests.

Two related UI improvements plus a server-configurable default: 1. **Gear active state**: the topbar settings gear highlights like the selected nav tabs when the current page is /settings. 2. **Theme pairs + dark mode toggle**: collapse the 10 theme cards into 5 pairs (Midnight, Smooth, Pastel Lavender, Pastel Peach, Pastel Cloud). Each card shows the light variant swatches on the top row and the dark variant swatches on the bottom row. Dark mode toggle in settings next to the theme cards and as a small sun/moon icon button in the topbar. Selecting a pair applies the variant matching the current dark mode state; toggling dark mode switches to the other variant of the selected pair. Persist dark mode in localStorage palette-dark and the pair base id in palette-theme. URL ?theme= still wins and accepts both base and variant ids. 3. **PALETTE_DEFAULT_DARK env var** (Docker-configurable): server-configured default dark mode for new visitors. Unset defaults to dark ON; false/0/off turns it off. Precedence: URL ?theme= > stored pair+dark prefs > server default dark > dark on. Documented in README configuration section. Resolution logic covered by Go tests.
fen added spent time 1 minute 2026-09-10 02:56:10 +00:00
fen added the QA label 2026-09-10 03:18:35 +00:00
fen added spent time 1 hour 2026-09-10 03:19:36 +00:00
fen closed this issue 2026-09-10 03:25:36 +00:00
Author
Collaborator

QA passed (PR #128): 7-file diff scoped correctly; go vet + go test clean; rendered checks on :18090 confirmed 5 pair cards x 2 rows x 5 swatches, gear class "on" on /settings only, topbar+settings dark toggles synced (aria-pressed flip midnight<->midnight-light), PALETTE_DEFAULT_DARK=false renders var dark = false (unset renders true), URL ?theme=smooth-dark wins. Merged via API, CI green on dev 19cb8d1, deployed to palette-dev and re-verified live on https://palette-dev.archfox.org (all checks pass incl. ?theme= and stored prefs precedence). Branch deleted.

QA passed (PR #128): 7-file diff scoped correctly; go vet + go test clean; rendered checks on :18090 confirmed 5 pair cards x 2 rows x 5 swatches, gear class "on" on /settings only, topbar+settings dark toggles synced (aria-pressed flip midnight<->midnight-light), PALETTE_DEFAULT_DARK=false renders var dark = false (unset renders true), URL ?theme=smooth-dark wins. Merged via API, CI green on dev 19cb8d1, deployed to palette-dev and re-verified live on https://palette-dev.archfox.org (all checks pass incl. ?theme= and stored prefs precedence). Branch deleted.
fen added spent time 28 minutes 2026-09-10 13:57:36 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Total Time Spent: 1 hour 30 minutes
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: poslop/palette#127