29 lines
688 B
TypeScript
29 lines
688 B
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Moon, Sun } from 'lucide-react';
|
||
|
|
import { useTheme } from '@/components/providers/ThemeProvider';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
|
||
|
|
export function ThemeToggle() {
|
||
|
|
const { theme, setTheme, resolvedTheme } = useTheme();
|
||
|
|
|
||
|
|
const toggleTheme = () => {
|
||
|
|
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
onClick={toggleTheme}
|
||
|
|
aria-label={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
|
||
|
|
>
|
||
|
|
{resolvedTheme === 'dark' ? (
|
||
|
|
<Sun className="h-5 w-5" />
|
||
|
|
) : (
|
||
|
|
<Moon className="h-5 w-5" />
|
||
|
|
)}
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
}
|