# 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.