# 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** | Warm off-white with dark text. High contrast for bright environments. | | **Slate** | Warm charcoal, lighter than Dark. Easier on the eyes for extended use. | | **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 `