feat(themes): Omarchy catalog, 12 light themes, Dark/Light Appearance picker

Expand the catalog from 11 themes (10 dark, 1 light) to 37 (24/13):
all 18 remaining Omarchy defaults (palettes from each theme's
colors.toml) plus 8 canonical light themes (Tokyo Night Day, Solarized
Light, One Light, Ayu Light, GitHub Light, Gruvbox Light, Everforest
Light, Kanagawa Lotus). Lupine leads the light list as the default
light theme; the app default stays tokyo-night.

Appearance panel: Dark/Light segmented filter (SSR-initialized from the
user's current theme), scrollable theme list, Bookshelf section pinned;
active row revealed on open. Light themes carry color-scheme: light and
the soft-shadow token set. Public-page theme selects get Dark/Light
optgroups. New moon/sun icons.

tailwind.config: safelist the new theme ids — Tailwind v3 purges custom
@layer base class selectors that appear in no scanned content file, so
an unsafelisted id silently ships without its CSS (found the hard way).

theme.ts: applyTheme now swaps only theme-* classes (changing theme
from the login select no longer wipes min-h-screen) and keeps the class
in sync on <html> for the new ThemeFlashGuard — a pre-paint inline
script on the four public pages that applies the saved theme before
first paint.

Kanagawa's UI accent uses crystalBlue (#7e9cd8) instead of Omarchy's
foreground-as-accent so links stay distinguishable from text.
This commit is contained in:
John O'Keefe committed 2026-10-18 12:08:07 -04:00
1 parent 4f913da0b1
commit d5bb874651
21 files changed
+1120 -289

No files matched your search

+39 -4
View File
@@ -2,7 +2,10 @@
## Color Themes
Bookhoard includes multiple color themes to suit your preferences:
Bookhoard includes 37 color themes — 24 dark and 13 light — including the
full set of [Omarchy](https://omarchy.org) defaults alongside the classics:
**Dark**
- **Tokyo Night** (default) - Dark blue/purple tones
- **Dracula** - Dark purple accent colors
@@ -14,13 +17,45 @@ Bookhoard includes multiple color themes to suit your preferences:
- **Catppuccin Mocha** - Soothing pastel dark theme
- **Catppuccin Macchiato** - Warm mid-tone theme
- **Catppuccin Frappé** - Frothy cool tones
- **Catppuccin Latte** - Warm light theme
- **Vantablack** - Pure black
- **Last Horizon** - Near-black with warm rose accents
- **Ethereal** - Deep midnight blue with peach text
- **Hackerman** - Terminal green on black
- **Matte Black** - Flat black with amber accents
- **Solitude** - Quiet blue-grey monochrome
- **Retro 82** - Amber terminal on deep navy
- **Osaka Jade** - Dark teal with jade accents
- **Kanagawa** - Ink-dark waves and cream ink
- **Miasma** - Swampy dark greens and ochre
- **Lumon** - Cold teal, for the severed floor
- **Ristretto** - Coffee-dark with warm peach
- **Gruvbox** - Retro groove, warm dark
- **Everforest** - Cozy green-toned dark
**Light**
- **Lupine** - Clean light with violet-blue accents (default light theme)
- **Tokyo Night Day** - Daylight counterpart of the default
- **Solarized Light** - Precision contrast on warm paper
- **One Light** - Atom's light theme
- **Ayu Light** - Bright and airy with orange accents
- **GitHub Light** - Familiar, clean white
- **Gruvbox Light** - Warm cream paper
- **Everforest Light** - Soft green-tinted daylight
- **Kanagawa Lotus** - Kanagawa's lotus-paper palette
- **Catppuccin Latte** - Warm light pastels
- **Rosé Pine** - Soft rose-tinted daylight
- **Flexoki Light** - High-contrast warm paper
- **White** - Pure monochrome white
### Changing Your Theme
1. In the sidebar, open the **Appearance** panel (palette icon, near the bottom)
2. Pick a theme from the list — each option shows its color swatch, and your active theme is marked with a checkmark
3. Your choice is saved automatically and synced across devices
2. Use the **Dark / Light** switch at the top to show the half you want —
it opens on the half your current theme lives in
3. Pick a theme from the list — each option shows its color swatch, and your
active theme is marked with a checkmark
4. Your choice is saved automatically and synced across devices
On small screens, open the sidebar with the menu button in the top bar first.