40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { Moon, Sun } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function ThemeToggle() {
|
|
const [theme, setTheme] = useState<'light' | 'dark'>('light');
|
|
|
|
useEffect(() => {
|
|
// Tema tercihini yükle
|
|
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
|
|
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
const initialTheme = savedTheme || systemTheme;
|
|
|
|
setTheme(initialTheme);
|
|
document.documentElement.classList.toggle('dark', initialTheme === 'dark');
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme = theme === 'light' ? 'dark' : 'light';
|
|
setTheme(newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
document.documentElement.classList.toggle('dark', newTheme === 'dark');
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={toggleTheme}
|
|
aria-label="Tema değiştir"
|
|
>
|
|
{theme === 'light' ? (
|
|
<Moon className="h-5 w-5" />
|
|
) : (
|
|
<Sun className="h-5 w-5" />
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|