feat: Light Mode mit Theme-Toggle
Build & Deploy Tippspiel / build (push) Successful in 30s

Fügt vollständigen Light Mode hinzu – umschaltbar per ☀️/🌙-Button
im Header, Auswahl wird in localStorage persistiert.

- index.css: Light-Mode-Variablen unter [data-theme="light"], neue Tokens --border-subtle, --shadow-card, --card-shine
- App.tsx: Theme-State + useEffect setzt data-theme auf <html>
- App.module.css: Toggle-Button gestylt, Header-Background auf CSS-Var umgestellt
- Komponenten-CSS: Hardcodierte rgba-Werte auf CSS-Variablen migriert

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-06 12:50:04 +02:00
parent 948f9800d5
commit 624e359d6f
8 changed files with 113 additions and 38 deletions
+4 -4
View File
@@ -52,7 +52,7 @@
.handle {
width: 40px;
height: 4px;
background: rgba(255,255,255,0.15);
background: var(--surface-high);
border-radius: 2px;
margin: 0 auto 20px;
}
@@ -222,7 +222,7 @@
width: 56px;
height: 56px;
background: var(--surface-high);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid var(--border-subtle);
border-radius: 16px;
color: var(--text-primary);
font-size: 24px;
@@ -287,7 +287,7 @@
background: var(--surface-high);
border-radius: 12px;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.08);
border: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
box-shadow:
@@ -511,7 +511,7 @@
flex-direction: column;
gap: 3px;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid var(--border-subtle);
}
.insightLine:last-child {