diora-web/docs/theme.md

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.