mrwnslz/diora-web
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions
diora-web/docs/theme.md
mrwnslz 884a18e8ef
Some checks failed
Build and push Docker image / build (push) Successful in 19s
Details
Test / test (push) Has been cancelled
Details
Hell und Dunkel (docs/theme.md), Vorlese-Schnittstelle für die Playerleiste; sw v102 
- 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>
2026-10-14 18:02:33 +02:00

2.6 KiB
Raw Blame History

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.