Initial commit: Kalendartool (Next.js, Prisma, Docker)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-10-08 14:38:04 +02:00
commit bc49c3074e
94 changed files with 12812 additions and 0 deletions
--- a/components/layout/ThemeToggle.tsx
+++ b/components/layout/ThemeToggle.tsx
@@ -0,0 +1,94 @@
+'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>
+  );
+}