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:
1 parent
4f913da0b1
commit
d5bb874651
21 files changed
+1120
-289
No files matched your search
+39
-4
@@ -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.
|
||||
|
||||
|
||||
Reference in new issue
Block a user