blob: 245a801ea9845cede79070b0a16948b3741511c4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
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.
|
