feat: Light Mode mit Theme-Toggle

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>
2026-04-06 12:50:04 +02:00
parent 948f9800d5
commit 624e359d6f
8 changed files with 113 additions and 38 deletions
@@ -14,11 +14,32 @@ 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';
+
+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() {
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
  const [devUser, setDevUser] = useState(1);
  const [devMatches, setDevMatches] = useState<any[]>([]);
  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
  useEffect(() => {
    if (!IS_DEV) return;
@@ -70,6 +91,14 @@ export default function App() {
            <NavLink to="/admin" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
              Admin
            </NavLink>
+            <button
+              className={styles.themeToggle}
+              onClick={toggleTheme}
+              title={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
+              aria-label="Theme wechseln"
+            >
+              {theme === 'dark' ? '☀️' : '🌙'}
+            </button>
          </nav>
        </div>
      </header>