feat: add theme-toggle component with next-themes sun/moon icons

web/src/components/theme-toggle.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { SunIcon, MoonIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return <div className="w-8 h-8" />;
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="w-8 h-8 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
+      aria-label="Toggle theme"
+    >
+      {isDark ? (
+        <SunIcon className="w-4 h-4" />
+      ) : (
+        <MoonIcon className="w-4 h-4" />
+      )}
+    </button>
+  );
+}