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/pages/AdminPage.module.css
+2 -2
View File
@@ -171,8 +171,8 @@
.spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border: 2px solid var(--surface-high);
border-top-color: var(--text-primary);
border-radius: 50%;
animation: spin 0.7s linear infinite;
flex-shrink: 0;
frontend/src/pages/MatchesPage.module.css
+3 -3
View File
@@ -40,7 +40,7 @@
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-secondary);
transition: all 0.15s;
@@ -58,7 +58,7 @@
flex-wrap: wrap;
gap: 6px;
padding: 4px 0;
border-top: 1px solid rgba(255,255,255,0.05);
border-top: 1px solid var(--border-subtle);
margin-top: -8px;
}
@@ -68,7 +68,7 @@
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.08);
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-muted);
transition: all 0.15s;
frontend/src/pages/ProfilePage.module.css
+1 -1
View File
@@ -1,7 +1,7 @@
.page { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.loading { display: flex; justify-content: center; padding: 60px; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--surface-high); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
.spinnerSm { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
.spinnerSm { width: 14px; height: 14px; border: 2px solid var(--surface-high); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { color: var(--text-secondary); padding: 40px; text-align: center; }