mrwnslz/diora-web
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions
diora-web/docs/theme.md
mrwnslz a399374216
All checks were successful
Build and push Docker image / build (push) Successful in 16s
Details
Test / test (push) Successful in 9m7s
Details
Test / e2e (push) Successful in 2m10s
Details
YouTube-Kanäle: zufällige 404 abfangen; „Automatisch“ in der Android-App 
- YouTube antwortet auf Kanal-Feeds derzeit bei etwa zwei von drei Abrufen
  grundlos mit 404 (Kanäle zeigten „lädt nicht: HTTP 404“): ein YouTube-Feed
  wird bis zu 12-mal im Abstand von 0,25 s gefragt. Tests dazu.
- Erscheinungsbild „Automatisch“: in der Android-App folgt die WebView nicht
  dem System, sondern dem (dunklen) App-Theme – die Seite fragt dort
  DioraNative.systemScheme() und hört __dioraSystemScheme bei einem Wechsel.
sw.js: diora-v129.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-19 08:16:09 +02:00

2.8 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 — 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).
  • 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.