First Release of Claw3D (#11)

Co-authored-by: iamlukethedev <iamlukethedev@users.noreply.github.com>

src/components/theme-toggle.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+const THEME_STORAGE_KEY = "theme";
+
+type ThemeMode = "light" | "dark";
+
+const getPreferredTheme = (): ThemeMode => {
+  if (typeof window === "undefined") return "light";
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+  if (stored === "light" || stored === "dark") return stored;
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return prefersDark ? "dark" : "light";
+};
+
+const applyTheme = (mode: ThemeMode) => {
+  if (typeof document === "undefined") return;
+  document.documentElement.classList.toggle("dark", mode === "dark");
+};
+
+export const ThemeToggle = () => {
+  // Keep SSR + initial hydration stable ("light") to avoid markup mismatch.
+  const [theme, setTheme] = useState<ThemeMode>("light");
+
+  useEffect(() => {
+    const preferred = getPreferredTheme();
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setTheme(preferred);
+    applyTheme(preferred);
+  }, []);
+
+  const toggleTheme = () => {
+    setTheme((current) => {
+      const next: ThemeMode = current === "dark" ? "light" : "dark";
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(THEME_STORAGE_KEY, next);
+      }
+      applyTheme(next);
+      return next;
+    });
+  };
+
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      className="ui-btn-icon ui-btn-icon-xs"
+    >
+      {isDark ? <Sun className="h-3 w-3" /> : <Moon className="h-3 w-3" />}
+    </button>
+  );
+};