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

feat: three-way theme toggle — Dark / Light / System

Browse Source 
Cycles: Sun (→ Light) → Monitor (→ System) → Moon (→ Dark)
System mode follows OS prefers-color-scheme and updates live.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-12 16:17:57 +02:00
parent ab09b92050
commit 2414fc04d9
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+28 -11
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom';
import { Sun, Moon } from 'lucide-react';
import { Sun, Moon, Monitor } from 'lucide-react';
import DashboardPage from './pages/DashboardPage';
import MatchesPage from './pages/MatchesPage';
import LeaderboardPage from './pages/LeaderboardPage';
@@ -18,18 +18,26 @@ let DevPanel: React.ComponentType<any> | null = null;
// VITE_TEST_MODE wird erst zur Laufzeit geprüft, daher Import immer einbinden
import('./components/DevPanel').then(m => { DevPanel = m.default; }).catch(() => {});
type Theme = 'dark' | 'light';
type ThemeSetting = 'dark' | 'light' | 'system';
function getInitialTheme(): Theme {
function getInitialSetting(): ThemeSetting {
try {
const stored = localStorage.getItem('theme') as Theme | null;
if (stored === 'light' || stored === 'dark') return stored;
const stored = localStorage.getItem('theme') as ThemeSetting | null;
if (stored === 'light' || stored === 'dark' || stored === 'system') return stored;
} catch {}
return 'dark';
}
function resolveTheme(setting: ThemeSetting): 'dark' | 'light' {
if (setting === 'system') {
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
}
return setting;
}
export default function App() {
const [theme, setTheme] = useState<Theme>(getInitialTheme);
const [themeSetting, setThemeSetting] = useState<ThemeSetting>(getInitialSetting);
const theme = resolveTheme(themeSetting);
const { message: rankMsg, dismiss: dismissRank } = useRankChange();
const [devUser, setDevUser] = useState(1);
const [devMatches, setDevMatches] = useState<any[]>([]);
@@ -38,11 +46,20 @@ export default function App() {
// Theme auf <html> setzen und in localStorage speichern
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
try { localStorage.setItem('theme', theme); } catch {}
}, [theme]);
try { localStorage.setItem('theme', themeSetting); } catch {}
}, [theme, themeSetting]);
// Listen for OS theme changes when in system mode
useEffect(() => {
if (themeSetting !== 'system') return;
const mq = window.matchMedia('(prefers-color-scheme: light)');
const handler = () => setRefreshKey(k => k + 1); // force re-render to re-resolve
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, [themeSetting]);
function toggleTheme() {
setTheme(t => t === 'dark' ? 'light' : 'dark');
setThemeSetting(t => t === 'dark' ? 'light' : t === 'light' ? 'system' : 'dark');
}
// DevUser als Query-Parameter im API-Fetch setzen
@@ -105,10 +122,10 @@ export default function App() {
<button
className={styles.themeToggle}
onClick={toggleTheme}
title={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
title={themeSetting === 'dark' ? 'Light Mode' : themeSetting === 'light' ? 'System' : 'Dark Mode'}
aria-label="Theme wechseln"
>
{theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
{themeSetting === 'dark' ? <Sun size={16} /> : themeSetting === 'light' ? <Monitor size={16} /> : <Moon size={16} />}
</button>
</div>
</div>