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 { .header {
background: rgba(10,14,26,0.92); background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
backdrop-filter: blur(20px); 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; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@@ -66,13 +66,31 @@
color: var(--text-secondary); 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 { .navLinkActive {
color: var(--primary); color: var(--primary);
background: var(--primary-dim); 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 { .main {
flex: 1; flex: 1;
max-width: 1100px; max-width: 1100px;
frontend/src/App.tsx
+29
View File
@@ -14,11 +14,32 @@ let DevPanel: React.ComponentType<any> | null = null;
// VITE_TEST_MODE wird erst zur Laufzeit geprüft, daher Import immer einbinden // VITE_TEST_MODE wird erst zur Laufzeit geprüft, daher Import immer einbinden
import('./components/DevPanel').then(m => { DevPanel = m.default; }).catch(() => {}); import('./components/DevPanel').then(m => { DevPanel = m.default; }).catch(() => {});
type Theme = 'dark' | 'light';
function getInitialTheme(): Theme {
try {
const stored = localStorage.getItem('theme') as Theme | null;
if (stored === 'light' || stored === 'dark') return stored;
} catch {}
return 'dark';
}
export default function App() { export default function App() {
const [theme, setTheme] = useState<Theme>(getInitialTheme);
const [devUser, setDevUser] = useState(1); const [devUser, setDevUser] = useState(1);
const [devMatches, setDevMatches] = useState<any[]>([]); const [devMatches, setDevMatches] = useState<any[]>([]);
const [refreshKey, setRefreshKey] = useState(0); const [refreshKey, setRefreshKey] = useState(0);
// Theme auf <html> setzen und in localStorage speichern
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
try { localStorage.setItem('theme', theme); } catch {}
}, [theme]);
function toggleTheme() {
setTheme(t => t === 'dark' ? 'light' : 'dark');
}
// DevUser als Query-Parameter im API-Fetch setzen // DevUser als Query-Parameter im API-Fetch setzen
useEffect(() => { useEffect(() => {
if (!IS_DEV) return; if (!IS_DEV) return;
@@ -70,6 +91,14 @@ export default function App() {
<NavLink to="/admin" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}> <NavLink to="/admin" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
Admin Admin
</NavLink> </NavLink>
<button
className={styles.themeToggle}
onClick={toggleTheme}
title={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
aria-label="Theme wechseln"
>
{theme === 'dark' ? '☀️' : '🌙'}
</button>
</nav> </nav>
</div> </div>
</header> </header>
frontend/src/components/MatchCard.module.css
+2 -2
View File
@@ -175,7 +175,7 @@
/* Tipp area */ /* Tipp area */
.tipRow { .tipRow {
border-top: 1px solid rgba(255,255,255,0.05); border-top: 1px solid var(--border-subtle);
padding-top: 14px; padding-top: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -323,7 +323,7 @@
.editBtn { .editBtn {
background: transparent; background: transparent;
border: 1px solid rgba(255,255,255,0.1); border: 1px solid var(--border-subtle);
color: var(--text-muted); color: var(--text-muted);
padding: 4px 12px; padding: 4px 12px;
border-radius: 20px; border-radius: 20px;
frontend/src/components/TipModal.module.css
+4 -4
View File
@@ -52,7 +52,7 @@
.handle { .handle {
width: 40px; width: 40px;
height: 4px; height: 4px;
background: rgba(255,255,255,0.15); background: var(--surface-high);
border-radius: 2px; border-radius: 2px;
margin: 0 auto 20px; margin: 0 auto 20px;
} }
@@ -222,7 +222,7 @@
width: 56px; width: 56px;
height: 56px; height: 56px;
background: var(--surface-high); background: var(--surface-high);
border: 1px solid rgba(255,255,255,0.1); border: 1px solid var(--border-subtle);
border-radius: 16px; border-radius: 16px;
color: var(--text-primary); color: var(--text-primary);
font-size: 24px; font-size: 24px;
@@ -287,7 +287,7 @@
background: var(--surface-high); background: var(--surface-high);
border-radius: 12px; border-radius: 12px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.08); border: 1px solid var(--border-subtle);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: box-shadow:
@@ -511,7 +511,7 @@
flex-direction: column; flex-direction: column;
gap: 3px; gap: 3px;
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid var(--border-subtle);
} }
.insightLine:last-child { .insightLine:last-child {
frontend/src/index.css
+33 -5
View File
@@ -2,12 +2,14 @@
WM 2026 Tippspiel — Stadium Elite Design System WM 2026 Tippspiel — Stadium Elite Design System
============================================================ */ ============================================================ */
/* --- Dark Mode (Standard) --- */
:root { :root {
--bg-deep: #0A0E1A; --bg-deep: #0A0E1A;
--bg-mid: #0F1628; --bg-mid: #0F1628;
--surface-low: #111827; --surface-low: #111827;
--surface-mid: #151D30; --surface-mid: #151D30;
--surface-high: #1C2640; --surface-high: #1C2640;
--border-subtle: rgba(255,255,255,0.07);
--primary: #4BB7F8; --primary: #4BB7F8;
--primary-dim: rgba(75,183,248,0.12); --primary-dim: rgba(75,183,248,0.12);
--gold: #FEAE32; --gold: #FEAE32;
@@ -22,6 +24,32 @@
--radius-md: 14px; --radius-md: 14px;
--radius-lg: 20px; --radius-lg: 20px;
--radius-xl: 28px; --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; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -38,7 +66,7 @@ html, body, #root {
/* Scrollbar */ /* Scrollbar */
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; } ::-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 */ /* Utility */
.font-display { font-family: 'Plus Jakarta Sans', sans-serif; } .font-display { font-family: 'Plus Jakarta Sans', sans-serif; }
@@ -50,10 +78,10 @@ html, body, #root {
.card { .card {
background: var(--surface-mid); background: var(--surface-mid);
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
box-shadow: box-shadow:
0 10px 25px rgba(0,0,0,0.25), var(--shadow-card),
inset 0 1px 0 rgba(255,255,255,0.07), inset 0 1px 0 var(--border-subtle);
inset 1px 0 0 rgba(255,255,255,0.04);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@@ -61,7 +89,7 @@ html, body, #root {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; left: 0; right: 0; height: 50%; 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; pointer-events: none;
} }
frontend/src/pages/AdminPage.module.css
+2 -2
View File
@@ -171,8 +171,8 @@
.spinner { .spinner {
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.3); border: 2px solid var(--surface-high);
border-top-color: #fff; border-top-color: var(--text-primary);
border-radius: 50%; border-radius: 50%;
animation: spin 0.7s linear infinite; animation: spin 0.7s linear infinite;
flex-shrink: 0; flex-shrink: 0;
frontend/src/pages/MatchesPage.module.css
+3 -3
View File
@@ -40,7 +40,7 @@
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
border: 1px solid rgba(255,255,255,0.1); border: 1px solid var(--border-subtle);
background: transparent; background: transparent;
color: var(--text-secondary); color: var(--text-secondary);
transition: all 0.15s; transition: all 0.15s;
@@ -58,7 +58,7 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 6px;
padding: 4px 0; padding: 4px 0;
border-top: 1px solid rgba(255,255,255,0.05); border-top: 1px solid var(--border-subtle);
margin-top: -8px; margin-top: -8px;
} }
@@ -68,7 +68,7 @@
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
border: 1px solid rgba(255,255,255,0.08); border: 1px solid var(--border-subtle);
background: transparent; background: transparent;
color: var(--text-muted); color: var(--text-muted);
transition: all 0.15s; 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; } .page { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.loading { display: flex; justify-content: center; padding: 60px; } .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; } .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); } } @keyframes spin { to { transform: rotate(360deg); } }
.empty { color: var(--text-secondary); padding: 40px; text-align: center; } .empty { color: var(--text-secondary); padding: 40px; text-align: center; }