Theme Toggle

1import { MoonIcon, SunIcon } from "lucide-react"
2 
3import { Button } from "@/components/ui/button"
4import { useTheme } from "@/hoogin/ui/theme-provider"
5 
6export function ThemeToggle() {
7  const { theme, setTheme } = useTheme()
8 
9  const isDark =
10    theme === "dark" ||
11    (theme === "system" &&
12      window.matchMedia("(prefers-color-scheme: dark)").matches)
13 
14  return (
15    <Button
16      variant="ghost"
17      size="icon"
18      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
19      onClick={() => setTheme(isDark ? "light" : "dark")}
20    >
21      {isDark ? <SunIcon /> : <MoonIcon />}
22    </Button>
23  )
24}