Tronax
f220d96e3b
- 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
38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<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."
|
||
/>
|
||
<title>WannPassts</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
</head>
|
||
<body>
|
||
<div id="app"></div>
|
||
<script type="module" src="/src/main.ts"></script>
|
||
</body>
|
||
</html>
|