Alexey Pavlov
a16bf812e4
- CSS-переменные --bg, --surface, --ink, --mute, --accent для обеих тем - darkMode: 'class' в Tailwind config - ThemeToggle компонент с Sun/Moon, сохраняет выбор в localStorage - Inline-скрипт в layout.js защищает от FOUC (FlashOfUnstyledContent) - Авто-определение по prefers-color-scheme как fallback - not-found.js: красивая 404 страница вместо дефолтной Next - Обновлены все компоненты и страницы — Header, Footer, ArticleCard, page.js, blog, tag, about
37 lines
1.3 KiB
JavaScript
37 lines
1.3 KiB
JavaScript
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
import { Sun, Moon } from 'lucide-react';
|
|
|
|
export default function ThemeToggle() {
|
|
const [theme, setTheme] = useState('light');
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
setTheme(isDark ? 'dark' : 'light');
|
|
}, []);
|
|
|
|
function toggle() {
|
|
const next = theme === 'dark' ? 'light' : 'dark';
|
|
setTheme(next);
|
|
if (next === 'dark') document.documentElement.classList.add('dark');
|
|
else document.documentElement.classList.remove('dark');
|
|
try { localStorage.setItem('theme', next); } catch {}
|
|
}
|
|
|
|
// плейсхолдер до маунта, чтобы кнопка не прыгала
|
|
if (!mounted) return <div className="w-9 h-9" aria-hidden />;
|
|
|
|
return (
|
|
<button
|
|
onClick={toggle}
|
|
className="w-9 h-9 inline-flex items-center justify-center rounded-lg mute hover:ink hover:surface-2 transition-colors"
|
|
title={theme === 'dark' ? 'Включить светлую тему' : 'Включить тёмную тему'}
|
|
aria-label="Переключить тему"
|
|
>
|
|
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
|
</button>
|
|
);
|
|
}
|