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:
parent
cb30223fd4
commit
f220d96e3b
11 changed files with 217 additions and 26 deletions
|
|
@ -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."
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue