Alexey Pavlov
35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
import { Sun, Moon } from 'lucide-react';
|
|
|
|
export default function ThemeToggle() {
|
|
const [theme, setTheme] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const saved = typeof window !== 'undefined' && localStorage.getItem('zp_theme');
|
|
const current = saved || 'light';
|
|
setTheme(current);
|
|
document.documentElement.setAttribute('data-theme', current);
|
|
}, []);
|
|
|
|
function toggle() {
|
|
const next = theme === 'dark' ? 'light' : 'dark';
|
|
setTheme(next);
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('zp_theme', next);
|
|
}
|
|
|
|
// На SSR не рендерим (избегаем mismatch)
|
|
if (!theme) return <div className="w-9 h-9" />;
|
|
|
|
return (
|
|
<button
|
|
onClick={toggle}
|
|
title={theme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}
|
|
className="w-9 h-9 inline-flex items-center justify-center rounded-lg hover:bg-surface2 transition-colors"
|
|
>
|
|
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
|
</button>
|
|
);
|
|
}
|