diff options
| author | Paul Buetow <paul@buetow.org> | 2026-05-17 15:25:52 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-05-17 15:25:52 +0300 |
| commit | 914bd7cd6aa14e839332a98d91c30b19865b0cf2 (patch) | |
| tree | 02b11537237a204048589e14ed24938b805e42f7 /docs/theming.md | |
| parent | 3b24f0e1be832584d6550e8cc3e5d24329f66f90 (diff) | |
Restructure repo: move Go server into player-server/
Diffstat (limited to 'docs/theming.md')
| -rw-r--r-- | docs/theming.md | 53 |
1 files changed, 0 insertions, 53 deletions
diff --git a/docs/theming.md b/docs/theming.md deleted file mode 100644 index 245a801..0000000 --- a/docs/theming.md +++ /dev/null @@ -1,53 +0,0 @@ -Theming -======= - -All colors live in `web/css/theme.css` as CSS Custom Properties on `:root`. - -### Current Implementation - -`themes.js` swaps the active theme by setting `document.documentElement.setAttribute('data-theme', ...)` and saves the preference to `localStorage`. Override blocks in `theme.css` handle the light variant: - -```css -/* Default (dark) — defined on :root */ -:root { - --bg-body: #0f1117; - --text-primary: #e6e8ef; - --accent: #5e9eff; - ... -} - -/* Light theme overrides */ -[data-theme="light"] { - --bg-body: #f4f5f8; - --text-primary: #12131a; - --accent: #2b6cb0; - ... -} -``` - -### Adding a New Theme - -Option A — inline override (recommended for small additions): - -1. Open `web/css/theme.css`. -2. Append a new attribute selector after the light block, e.g.: - -```css -[data-theme="solarized"] { - --bg-body: #002b36; - --text-primary: #839496; - --accent: #268bd2; - ... -} -``` - -3. Wire the toggle in `web/js/themes.js` (or expose a selector UI in `index.html`) to call `apply('solarized')`. - -Option B — separate file (if you prefer a stylesheet swap): - -1. Create `web/css/themes/<name>.css` containing `:root { ... }` overrides. -2. Dynamically create or swap a `<link rel="stylesheet">` in `themes.js` instead of using `data-theme`. - -**Rules:** -- No color literals in component styles — everything must go through `var(--*)`. -- Do not add inline styles in HTML or JS.
\ No newline at end of file |
