John O'Keefe
d5bb874651
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.
87 lines
3.4 KiB
Markdown
87 lines
3.4 KiB
Markdown
# Themes and Wood Paneling
|
|
|
|
## Color Themes
|
|
|
|
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
|
|
- **Nord** - Arctic, bluish-gray colors
|
|
- **Solarized Dark** - Precision contrast for readability
|
|
- **Monokai** - Dark theme with vibrant accents
|
|
- **One Dark Pro** - Atom's favorite theme
|
|
- **Material Dark** - Material Design dark theme
|
|
- **Catppuccin Mocha** - Soothing pastel dark theme
|
|
- **Catppuccin Macchiato** - Warm mid-tone theme
|
|
- **Catppuccin Frappé** - Frothy cool tones
|
|
- **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. 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.
|
|
|
|
## Wood Paneling
|
|
|
|
Wood paneling adds texture to your dashboard bookshelf background, giving it a classic bookshelf feel.
|
|
|
|
### Available Wood Textures
|
|
|
|
- **None** (default) - Solid color background
|
|
- **Wood Light** - Light oak/birch texture
|
|
- **Wood Dark** - Dark walnut/mahogany texture
|
|
- **Wood Mahogany** - Reddish-brown mahogany texture
|
|
|
|
### Applying Wood Paneling
|
|
|
|
1. In the sidebar, open the **Appearance** panel (palette icon, near the bottom)
|
|
2. Scroll to the **Bookshelf** section below the theme list
|
|
3. Select your preferred wood texture (each option shows a texture swatch; **None** is the default)
|
|
4. Texture is applied to the dashboard bookshelf background
|
|
|
|
**Note:** Wood paneling is a browser preference and is not synced across devices.
|
|
|
|
### Tips
|
|
|
|
- Wood textures work best with darker color themes (Tokyo Night, Nord, etc.)
|
|
- Light wood pairs well with light themes (Catppuccin Latte)
|
|
- Wood paneling only affects the dashboard bookshelf area
|