/
iphmelev
/
theme-react-lab
Обзор
Документация
Войти
/
iphmelev
/
theme-react-lab
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
main
src/components/ThemeToggle.jsx
34 строки
852 B
Artem Khmelev
React + Vite + ThemeToggle
09 июл 2026, 11:14
09 июл 2026, 11:14
216ec27
Код
Авторство
О чём код?
import { useEffect, useState } from 'react'; function ThemeToggle() { const [isDark, setIsDark] = useState(() => { return localStorage.getItem('theme') === 'dark'; }); useEffect(() => { // Применяем тему при первом рендере if (isDark) { document.body.classList.add('dark'); } else { document.body.classList.remove('dark'); } }, [isDark]); const toggleTheme = () => { const newTheme = !isDark; setIsDark(newTheme); localStorage.setItem('theme', newTheme ? 'dark' : 'light'); }; return ( <button onClick={toggleTheme} className="theme-toggle" aria-label={isDark ? 'Включить светлую тему' : 'Включить тёмную тему'} > {isDark ? '☀️' : '🌙'} </button> ); } export default ThemeToggle;