94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Dark-Mode-Umschalter als Icon-Button.
|
|
*
|
|
* - Persistiert die Wahl in localStorage ("light" | "dark" | null=System).
|
|
* - Schaltet die Klasse "dark" auf <html> (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<Theme>('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 (
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
aria-label={theme === 'dark' ? 'Zu hellem Design wechseln' : 'Zu dunklem Design wechseln'}
|
|
title={theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
|
|
className="rounded-md p-2 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
|
|
>
|
|
{/* Flaches 2D-Icon: Sonne im Dark-Mode, Mond im Light-Mode. */}
|
|
{theme === 'dark' ? (
|
|
<svg
|
|
width={18}
|
|
height={18}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.8}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="12" cy="12" r="4" />
|
|
<path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
width={18}
|
|
height={18}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.8}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
);
|
|
} |