parker/garnet
Watch
1
0
Fork
You've already forked garnet
 0
Code Pull requests Releases 5 Activity Actions

Custom accent color with gemstone presets #42

Merged
parkerhdavis merged 1 commit from accent-color-presets into main 2026-06-01 14:41:24 -06:00
Conversation 0 Commits 1 Files changed 7 +155 -21
parkerhdavis commented 2026-06-01 14:41:18 -06:00 (Migrated from github.com)
Copy link

What

The app's accent color is now user-selectable from six gemstone presets, recoloring the whole UI live.

How

The theme's primary/accent were hardcoded at hue 28 (garnet). This extracts the hue into a --garnet-hue CSS variable that primary/accent read via oklch(L C var(--garnet-hue)), so swapping it rotates the whole accent family while keeping lightness/chroma — and the warm-neutral backgrounds — fixed.

  • lib/accent.ts — six presets (Garnet, Amber, Emerald, Sapphire, Amethyst, Rose), each a single hue; all clear AA contrast against the white primary-content text.
  • prefsStore — accentId persisted to localStorage; useApplyAccent writes the hue to --garnet-hue on mount and on change, so the UI recolors live.
  • Settings → Appearance is a real page now (swatch picker) instead of a stub.
  • The sidebar logo recolors by using the white-on-transparent splash PNG as a CSS mask filled with --color-primary — no per-preset image assets needed for the UI.

The matching OS window-icon swap (preset gem icons) is a separate follow-up PR.

Testing

tsc, Biome, and full-repo lint pass. Verified via make dev: each swatch recolors the whole UI and the logo live, backgrounds unchanged, and the choice survives a restart.

## What The app's accent color is now user-selectable from six gemstone presets, recoloring the whole UI live. ## How The theme's primary/accent were hardcoded at hue 28 (garnet). This extracts the hue into a `--garnet-hue` CSS variable that primary/accent read via `oklch(L C var(--garnet-hue))`, so swapping it rotates the whole accent family while keeping lightness/chroma — and the warm-neutral backgrounds — fixed. - `lib/accent.ts` — six presets (Garnet, Amber, Emerald, Sapphire, Amethyst, Rose), each a single hue; all clear AA contrast against the white primary-content text. - `prefsStore` — `accentId` persisted to localStorage; `useApplyAccent` writes the hue to `--garnet-hue` on mount and on change, so the UI recolors live. - Settings → Appearance is a real page now (swatch picker) instead of a stub. - The sidebar logo recolors by using the white-on-transparent splash PNG as a CSS mask filled with `--color-primary` — no per-preset image assets needed for the UI. The matching OS window-icon swap (preset gem icons) is a separate follow-up PR. ## Testing `tsc`, Biome, and full-repo lint pass. Verified via `make dev`: each swatch recolors the whole UI and the logo live, backgrounds unchanged, and the choice survives a restart.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
parker/garnet!42
No description provided.