diff --git a/THEMES.md b/THEMES.md new file mode 100644 index 0000000..1d10aaf --- /dev/null +++ b/THEMES.md @@ -0,0 +1,116 @@ +# Hermes Web UI — Themes + +Hermes Web UI supports pluggable color themes. Five themes ship built-in, and +you can create your own with pure CSS — no Python changes needed. + +--- + +## Switching Themes + +**Settings panel:** Click the gear icon, select a theme from the dropdown. The +preview is instant — the UI updates as you click through options. + +**Slash command:** Type `/theme dark` or `/theme light` in the composer. + +**Themes persist** across page reloads and server restarts (stored in +`settings.json` server-side, with `localStorage` for flicker-free loading). + +--- + +## Built-in Themes + +| Theme | Description | +|-------|-------------| +| **Dark** (default) | Deep navy/indigo with muted blue accents. Easy on the eyes for long sessions. | +| **Light** | Clean white/gray with dark text. High contrast for bright environments. | +| **Solarized Dark** | Ethan Schoonover's classic dark palette. Teal background, warm accents. | +| **Monokai** | Warm dark theme inspired by the Monokai editor scheme. Green/pink accents. | +| **Nord** | Arctic blue-gray palette from the Nord color system. Calm and minimal. | + +--- + +## Creating a Custom Theme + +A theme is a CSS block that overrides the color variables. Add it to +`static/style.css` (or a separate file that you link after the main stylesheet). + +### Step 1: Define your theme block + +Every color in the UI comes from these CSS variables: + +```css +:root[data-theme="your-theme-name"] { + --bg: #1a1a2e; /* Main background */ + --sidebar: #16213e; /* Sidebar background */ + --border: rgba(255,255,255,0.08); /* Subtle borders */ + --border2: rgba(255,255,255,0.14); /* Stronger borders */ + --text: #e8e8f0; /* Primary text color */ + --muted: #8888aa; /* Secondary/muted text */ + --accent: #e94560; /* Accent color (errors, warnings, delete) */ + --blue: #7cb9ff; /* Primary action color (links, active states) */ + --gold: #c9a84c; /* Secondary accent (pinned items, gold highlights) */ + --code-bg: #0d1117; /* Code block background */ +} +``` + +That's it. Override any or all of these variables. The entire UI adapts +automatically because every color reference uses `var(--name)`. + +### Step 2: Add it to the theme picker (optional) + +To make your theme appear in the Settings dropdown, add an `