Initial Commit

components/ThemeToggle.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
+import { useState, useEffect } from "react";
+
+const ThemeToggle = () => {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // avoid SSR mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // placeholder box so layout doesn’t jump
+    return <div style={{ width: 20, height: 20 }} />;
+  }
+
+  return (
+    <DarkModeSwitch
+      checked={resolvedTheme === "dark"}
+      onChange={(checked) => setTheme(checked ? "dark" : "light")}
+      size={20}
+    />
+  );
+};
+
+export default ThemeToggle;