File size: 1,240 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | "use client";
import * as React from "react";
import { Moon, Sun, Monitor } from "lucide-react";
import { useTheme } from "next-themes";
import { useHydrated } from "@/hooks/useHydrated";
import { cn } from "@/lib/utils";
export function ThemeToggle({ className }: { className?: string }) {
const { theme, setTheme } = useTheme();
const mounted = useHydrated();
if (!mounted) {
return <div className={cn("size-8 rounded-lg", className)} />; // Placeholder to avoid layout shift
}
const cycleTheme = () => {
if (theme === "system") {
setTheme("light");
} else if (theme === "light") {
setTheme("dark");
} else {
setTheme("system");
}
};
return (
<button
onClick={cycleTheme}
className={cn(
"flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
className
)}
title={`Current theme: ${theme}. Click to switch.`}
>
{theme === "light" && <Sun className="size-4" />}
{theme === "dark" && <Moon className="size-4" />}
{theme === "system" && <Monitor className="size-4" />}
<span className="sr-only">Toggle theme</span>
</button>
);
}
|