38 lines
942 B
TypeScript
38 lines
942 B
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Sun, Moon } from 'lucide-react';
|
|
import { getInitialTheme, toggleTheme, watchSystemTheme } from '@/lib/theme';
|
|
|
|
export function ThemeToggle() {
|
|
const [theme, setTheme] = useState<'light' | 'dark'>(getInitialTheme);
|
|
|
|
useEffect(() => {
|
|
// Watch for system theme changes
|
|
const cleanup = watchSystemTheme((newTheme) => {
|
|
setTheme(newTheme);
|
|
});
|
|
|
|
return cleanup;
|
|
}, []);
|
|
|
|
const handleToggle = () => {
|
|
const newTheme = toggleTheme();
|
|
setTheme(newTheme);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handleToggle}
|
|
className="h-9 w-9"
|
|
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
|
>
|
|
{theme === 'light' ? (
|
|
<Moon className="h-4 w-4" />
|
|
) : (
|
|
<Sun className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
);
|
|
} |