Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 1x 1x 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 1x | import { applyTheme, getCurrentTheme, getStoredTheme, setStoredTheme, toggleTheme } from '@common/theme/theme';
import { Moon, Sun } from 'lucide-react';
import { useEffect, useState } from 'react';
const ThemeToggle: React.FC = () => {
const [mode, setMode] = useState<'light' | 'dark'>(getCurrentTheme());
useEffect(() => {
const stored = getStoredTheme();
if (stored) {
applyTheme(stored);
setMode(stored);
} else {
setMode(getCurrentTheme());
}
}, []);
const handleToggle = () => {
const next = toggleTheme();
setStoredTheme(next);
setMode(next);
};
const isDark = mode === 'dark';
return (
<button
type="button"
onClick={handleToggle}
aria-label="Toggle theme"
className="p-2 rounded-lg transition-colors text-slate-600 hover:text-slate-800 hover:bg-slate-100 dark:text-slate-300 dark:hover:text-white dark:hover:bg-slate-800/60"
>
{isDark ? <Sun size={18} /> : <Moon size={18} />}
</button>
);
};
export default ThemeToggle;
|