init

app/components/ThemeToggle.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useSyncExternalStore } from "react";
+
+const STORAGE_KEY = "plan-my-meals:theme";
+const EVENT_NAME = "plan-my-meals:theme-change";
+
+type ResolvedTheme = "light" | "dark";
+
+function getSnapshot(): ResolvedTheme {
+  const explicit = document.documentElement.dataset.theme;
+  if (explicit === "light" || explicit === "dark") return explicit;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function subscribe(callback: () => void): () => void {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", callback);
+  window.addEventListener(EVENT_NAME, callback);
+  return () => {
+    mq.removeEventListener("change", callback);
+    window.removeEventListener(EVENT_NAME, callback);
+  };
+}
+
+export function ThemeToggle() {
+  // Server snapshot returns null so hydration never mismatches; button renders a stable shell first.
+  const theme = useSyncExternalStore<ResolvedTheme | null>(subscribe, getSnapshot, () => null);
+
+  function toggleTheme() {
+    const next: ResolvedTheme = (theme ?? getSnapshot()) === "dark" ? "light" : "dark";
+    document.documentElement.dataset.theme = next;
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+      // Ignore blocked storage; dataset.theme still updates the active session.
+    }
+    window.dispatchEvent(new Event(EVENT_NAME));
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={theme === "dark" ? "Switch to light paper theme" : "Switch to dark slate theme"}
+      title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+      className="grid size-10 shrink-0 place-items-center rounded-lg border border-line bg-surface text-ink-muted transition-colors hover:border-line-strong hover:bg-raised hover:text-ink"
+    >
+      {theme === "dark" ? <Sun className="size-4" strokeWidth={1.75} aria-hidden /> : <Moon className="size-4" strokeWidth={1.75} aria-hidden />}
+    </button>
+  );
+}