Comprehensive admin + user dashboards (production-ready)

components/app/theme-toggle.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+
+/**
+ * Light/dark toggle rendered inside the user menu. Uses `onSelect` with
+ * `preventDefault` so picking it doesn't close the menu, letting the user see
+ * the theme flip. Guards against hydration mismatch by waiting for mount.
+ */
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  const isDark = mounted && resolvedTheme === "dark";
+
+  return (
+    <DropdownMenuItem
+      onSelect={(e) => {
+        e.preventDefault();
+        setTheme(isDark ? "light" : "dark");
+      }}
+    >
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {isDark ? "Light mode" : "Dark mode"}
+    </DropdownMenuItem>
+  );
+}