feat(frontend): add dark/light theme toggle with system detection

- Add ThemeToggle component (Auto / Dark / Light) to all views
- Store preference per browser and detect system preference live
  via prefers-color-scheme
- Apply theme before first render in index.html to prevent flash
- Extend CSS with light theme variables and refactor glass styles
This commit is contained in:
Tronax 2026-08-25 18:59:12 +02:00
parent cb30223fd4
commit f220d96e3b
Signed by: Tronax
SSH key fingerprint: SHA256:2pKKXDZucWvaF/GzXNz0FY53EAO1YDLN80bqS+TTz/o
11 changed files with 217 additions and 26 deletions

View file

@ -5,6 +5,20 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#05070c" />
<script>
// Design vor dem ersten Render anwenden (verhindert Flash beim Laden)
;(function () {
try {
var m = localStorage.getItem('wannpassts_theme')
var dark =
m === 'dark' ||
((m === null || m === 'auto') && window.matchMedia('(prefers-color-scheme: dark)').matches)
var t = dark ? 'dark' : 'light'
document.documentElement.dataset.theme = t
document.documentElement.style.colorScheme = t
} catch (e) {}
})()
</script>
<meta
name="description"
content="WannPassts Deine freien Zeiten, geteilt per Link. Verbinde Google-, iCloud- und andere Kalender und nimm Buchungsanfragen an, ohne deine Termine preiszugeben."