53 lines
3.3 KiB
Markdown
53 lines
3.3 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, feeds.js, templates, and static/podcasts/podcast-ui.css —
|
|
a copy of diora-android's native.css by tools/sync_podcast_ui.py), diora-android (native.css,
|
|
native-*.js; the apps ship diora-web's files too, through build_web.py) 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 — except in the Android app, whose WebView
|
|
answers that query from the app's own (dark) theme, not the system's: there the page asks
|
|
`DioraNative.systemScheme()` ("dark" | "light") and the app calls
|
|
`window.__dioraSystemScheme(scheme)` when the system switches (uiMode change, or on return).
|
|
* The desktop app (Electron) sets `nativeTheme.themeSource` to the scheme for a fixed choice
|
|
(title bar, scrollbars, form controls match) but leaves it on `"system"` for "auto", so
|
|
`prefers-color-scheme` there is the system's; the page tells it the choice along with the
|
|
scheme (`dioraDesktop.setTheme(scheme, choice)`, desktop 0.1.31).
|
|
* 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.
|