added theme toggle component

Author: Mautjee

services/explorer-ui/src/components/theme-toggle.tsx

@@ -0,0 +1,34 @@
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme as useNextTheme } from "next-themes";
+import { Button } from "./ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useNextTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch by only rendering after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <Button variant="ghost" size="icon" className="w-9 px-0" />;
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="w-9 px-0 text-white hover:text-white hover:bg-purple-light/20"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? (
+        <SunIcon className="h-5 w-5" />
+      ) : (
+        <MoonIcon className="h-5 w-5" />
+      )}
+    </Button>
+  );
+}