'use client'; /** * Dark-Mode-Umschalter als Icon-Button. * * - Persistiert die Wahl in localStorage ("light" | "dark" | null=System). * - Schaltet die Klasse "dark" auf (Tailwind class-Strategie). * - Lauscht auf Systemwechsel, solange der User nichts gewaehlt hat. */ import { useCallback, useEffect, useState } from 'react'; const STORAGE_KEY = 'calendar-theme'; type Theme = 'light' | 'dark'; function applyTheme(theme: Theme) { document.documentElement.classList.toggle('dark', theme === 'dark'); } export function ThemeToggle() { const [theme, setTheme] = useState('light'); useEffect(() => { const stored = window.localStorage.getItem(STORAGE_KEY); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const initial: Theme = stored === 'dark' || (!stored && prefersDark) ? 'dark' : 'light'; setTheme(initial); applyTheme(initial); if (stored) { return; } // Folgt Systemwechsel, solange der User nichts explizit gewaehlt hat. const media = window.matchMedia('(prefers-color-scheme: dark)'); const listener = (event: MediaQueryListEvent) => { const next: Theme = event.matches ? 'dark' : 'light'; setTheme(next); applyTheme(next); }; media.addEventListener('change', listener); return () => media.removeEventListener('change', listener); }, []); const toggle = useCallback(() => { setTheme((previous) => { const next: Theme = previous === 'dark' ? 'light' : 'dark'; applyTheme(next); window.localStorage.setItem(STORAGE_KEY, next); return next; }); }, []); return ( ); }