| "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> | |
| ); | |
| } | |