mwf975_git/tippspiel
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Light Mode mit Theme-Toggle

Browse Source 
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 2127ebceeb
commit f56ecb724b
8 changed files with 113 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.module.css
+21 -3
View File
@@ -5,9 +5,9 @@
}
.header {
background: rgba(10,14,26,0.92);
background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(75,183,248,0.1);
border-bottom: 1px solid rgba(75,183,248,0.12);
position: sticky;
top: 0;
z-index: 100;
@@ -66,13 +66,31 @@
color: var(--text-secondary);
}
.navLink:hover { color: var(--text-primary); background: var(--surface-mid); }
.navLink:hover { color: var(--text-primary); background: var(--surface-high); }
.navLinkActive {
color: var(--primary);
background: var(--primary-dim);
}
.themeToggle {
background: var(--surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
margin-left: 6px;
flex-shrink: 0;
}
.themeToggle:hover { background: var(--primary-dim); }
.themeToggle:active { transform: scale(0.92); }
.main {
flex: 1;
max-width: 1100px;