Leon Serfaty
32 lines
969 B
TypeScript
32 lines
969 B
TypeScript
"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>
|
|
);
|
|
}
|