mrwnslz
884a18e8ef
- Farbvariablen für beide Schemata in app.css (--bg --fg --muted --card --panel --hover --raised --border --border-strong --accent --on-accent --scrim --shadow), Hell als html[data-theme=light]. Umschalter im Kopf jeder Seite (base.html, vor dem ersten Zeichnen): Dunkel / Hell / Automatisch, ☾☀◐ in der Navigation; __dioraTheme / __dioraSetTheme / Ereignis diora-theme. - Reader: neues Standard-Theme "Wie die App" (Dunkel/Hell folgt der App). - ◑ (Kontrast zum Hintergrundbild) nur noch mit Hintergrundbild. - home.js auf die Variablen. - window.__dioraTts (state/toggle/stop/next/prev) und Ereignis diora-tts für die Playerleiste; mit __dioraTtsDock keine eigene Vorlese-Leiste mehr. - Reader-Hinweise über der Playerleiste, wenn sie im Reader steht. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
44 lines
2.6 KiB
Markdown
44 lines
2.6 KiB
Markdown
# Light and dark
|
|
|
|
diora has two colour schemes, **dark** (the old look) and **light**, chosen by the reader:
|
|
"Dunkel", "Hell" or "Automatisch" (as the operating system says). This file is the contract
|
|
between diora-web (app.css, home.js, templates), diora-android (native.css, native-*.js,
|
|
podcast-ui.css, feeds.js) and diora-desktop (desktop.css).
|
|
|
|
## Switching
|
|
|
|
* `<html data-theme="dark|light">` is the scheme in effect. Set as early as possible
|
|
(an inline script in base.html's `<head>`, before any CSS paints) so nothing flashes.
|
|
* The choice is `localStorage.diora_theme` = `"dark"` (default) | `"light"` | `"auto"`.
|
|
* `window.__dioraTheme()` → the choice; `window.__dioraSetTheme(choice)` sets and applies it;
|
|
`window.__dioraThemeChanged` (event `diora-theme` on `window`, `detail` = the scheme in
|
|
effect) lets native code follow (Android status/navigation bars, Electron's window colour).
|
|
* "auto" follows `prefers-color-scheme` live.
|
|
* E-ink mode (`html.nui-eink`) keeps its own black-on-white rules and ignores this.
|
|
* The reader has its own themes; its default is now "Wie die App" (`readerSettings.theme = 'app'`):
|
|
dark → reader dark, light → reader bright. Sepia, Dunkel and Hell stay choosable.
|
|
* A wallpaper (the radio page's background image) keeps its own contrast handling
|
|
(`body.bright-bg`, the ◑ button); without a wallpaper the scheme decides.
|
|
|
|
## Colours: only through these variables
|
|
|
|
| variable | dark | light | for |
|
|
|---|---|---|---|
|
|
| `--bg` | `#000` | `#f6f5f1` | the page |
|
|
| `--fg` | `#fff` | `#17171a` | text |
|
|
| `--muted` | `#9a9a9a` | `#66666b` | secondary text, icons |
|
|
| `--card` | `#0b0b0b` | `#ffffff` | cards, rows that stand out |
|
|
| `--panel` | `#111` | `#ffffff` | sheets, menus, docks, bars |
|
|
| `--hover` | `#141414` | `#ecebe6` | hover / pressed |
|
|
| `--raised` | `#1a1a1a` | `#e4e2dc` | inputs, tracks of sliders, chips |
|
|
| `--border` | `#2a2a2a` | `#d9d6ce` | lines |
|
|
| `--border-strong` | `#444` | `#b4b0a6` | lines that must show (inputs, focus off) |
|
|
| `--accent` | `#e63946` | `#d0263a` | the red: brand, active, progress |
|
|
| `--on-accent` | `#fff` | `#fff` | text on the red |
|
|
| `--scrim` | `rgba(0,0,0,.6)` | `rgba(20,20,20,.35)` | behind sheets |
|
|
| `--shadow` | `none` | `0 1px 3px rgba(0,0,0,.08)` | cards in light (no lines needed in dark) |
|
|
|
|
Old names stay as aliases: `--nui-muted: var(--muted)`, `--nui-panel: var(--panel)`,
|
|
`--text: var(--fg)`, `--text-muted: var(--muted)`, `--bg-card: var(--card)`.
|
|
Images, album art, covers and Ambient's own picture keep their colours. Status colours
|
|
(`--green`, `--yellow`, `--red`) may stay as they are.
|