Как сделать на сайте светлую и темную тему

Для реализации светлой и тёмной темы можно использовать CSS-переменные и localStorage для сохранения выбора пользователя. ```html Toggle Theme ``` ```css /* CSS */ :root { --bg-color: #ffffff; --text-color: #333333; } [data-theme="dark"] { --bg-color: #333333; --text-color: #ffffff; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease; } ``` ```javascript // JavaScript const themeToggle = document.getElementById('themeToggle'); const currentTheme = localStorage.getItem('theme'); if (currentTheme === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); } themeToggle.addEventListener('click', () => { const theme = document.documentElement.getAttribute('data-theme'); if (theme === 'dark') { document.documentElement.removeAttribute('data-theme'); localStorage.setItem('theme', 'light'); } else { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } }); ``` Также можно использовать prefers-color-scheme для автоматического определения темы системы: ```css @media (prefers-color-scheme: dark) { :root { --bg-color: #333333; --text-color: #ffffff; } } ```