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

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

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 948f9800d5
commit 624e359d6f
8 changed files with 113 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+51 -23
View File
@@ -2,26 +2,54 @@
WM 2026 Tippspiel — Stadium Elite Design System
============================================================ */
/* --- Dark Mode (Standard) --- */
:root {
--bg-deep: #0A0E1A;
--bg-mid: #0F1628;
--surface-low: #111827;
--surface-mid: #151D30;
--surface-high: #1C2640;
--primary: #4BB7F8;
--primary-dim: rgba(75,183,248,0.12);
--gold: #FEAE32;
--gold-glow: rgba(254,174,50,0.4);
--cyan: #69DAFF;
--text-primary: #F0F4FF;
--bg-deep: #0A0E1A;
--bg-mid: #0F1628;
--surface-low: #111827;
--surface-mid: #151D30;
--surface-high: #1C2640;
--border-subtle: rgba(255,255,255,0.07);
--primary: #4BB7F8;
--primary-dim: rgba(75,183,248,0.12);
--gold: #FEAE32;
--gold-glow: rgba(254,174,50,0.4);
--cyan: #69DAFF;
--text-primary: #F0F4FF;
--text-secondary: rgba(240,244,255,0.55);
--text-muted: rgba(240,244,255,0.3);
--success: #34D399;
--error: #F87171;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--text-muted: rgba(240,244,255,0.3);
--success: #34D399;
--error: #F87171;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--shadow-card: 0 10px 25px rgba(0,0,0,0.25);
--card-shine: rgba(255,255,255,0.04);
--scrollbar-bg: var(--surface-high);
}
/* --- Light Mode --- */
[data-theme="light"] {
--bg-deep: #F0F4FA;
--bg-mid: #E8EEF7;
--surface-low: #FFFFFF;
--surface-mid: #FFFFFF;
--surface-high: #DDE5F0;
--border-subtle: rgba(0,0,0,0.08);
--primary: #1A8FE3;
--primary-dim: rgba(26,143,227,0.10);
--gold: #D4880A;
--gold-glow: rgba(212,136,10,0.3);
--cyan: #0080C6;
--text-primary: #0D1526;
--text-secondary: rgba(13,21,38,0.6);
--text-muted: rgba(13,21,38,0.35);
--success: #1AAB72;
--error: #D93025;
--shadow-card: 0 4px 16px rgba(0,0,0,0.10);
--card-shine: rgba(255,255,255,0.7);
--scrollbar-bg: var(--surface-high);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -38,7 +66,7 @@ html, body, #root {
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-high); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-bg); border-radius: 3px; }
/* Utility */
.font-display { font-family: 'Plus Jakarta Sans', sans-serif; }
@@ -50,10 +78,10 @@ html, body, #root {
.card {
background: var(--surface-mid);
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
box-shadow:
0 10px 25px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.07),
inset 1px 0 0 rgba(255,255,255,0.04);
var(--shadow-card),
inset 0 1px 0 var(--border-subtle);
position: relative;
overflow: hidden;
}
@@ -61,7 +89,7 @@ html, body, #root {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
background: linear-gradient(180deg, var(--card-shine) 0%, transparent 100%);
pointer-events: none;
}