theme-toggle.tsx
668 bytes
| 1 | 'use client'; |
|---|---|
| 2 | |
| 3 | import { Moon, Sun } from 'lucide-react'; |
| 4 | import { useTheme } from 'next-themes'; |
| 5 | import { useEffect, useState } from 'react'; |
| 6 | import { Button } from '@/components/ui/button'; |
| 7 | |
| 8 | export function ThemeToggle() { |
| 9 | const { setTheme, resolvedTheme } = useTheme(); |
| 10 | const [mounted, setMounted] = useState(false); |
| 11 | useEffect(() => setMounted(true), []); |
| 12 | |
| 13 | return ( |
| 14 | <Button |
| 15 | variant="ghost" |
| 16 | size="icon" |
| 17 | aria-label="Toggle theme" |
| 18 | onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')} |
| 19 | > |
| 20 | {mounted && resolvedTheme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />} |
| 21 | </Button> |
| 22 | ); |
| 23 | } |
| 24 | |