Внедрить переключение между светлой и темной темами в веб-приложении можно несколькими способами, и ваш выбор зависит от потребностей вашего проекта. Вот основные шаги и варианты реализации:
### 1. Использование CSS
Для начала, вам нужно определить стили для светлой и темной темы. Это можно сделать с помощью CSS-классов:
```css
/* Светлая тема */
body {
background-color: white;
color: black;
}
/* Темная тема */
body.dark-theme {
background-color: black;
color: white;
}
```
### 2. Переключение тем
Вы можете добавить элемент управления (например, кнопку или переключатель), чтобы пользователь мог выбирать тему. Например:
```html
<button id="theme-toggle">Переключить тему</button>
```
```javascript
const button = document.getElementById('theme-toggle');
button.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
```
### 3. Сохранение выбора пользователя
Сохранение выбора пользователя в `localStorage` — это распространённый подход. Это позволяет сохранить предпочтения пользователя между сеансами.
```javascript
// Проверяем сохранённую тему при загрузке страницы
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.body.classList.toggle('dark-theme', currentTheme === 'dark');
}
// Сохраняем тему при переключении
button.addEventListener('click', () => {
const isDarkTheme = document.body.classList.toggle('dark-theme');
localStorage.setItem('theme', isDarkTheme ? 'dark' : 'light');
});
```
### 4. Альтернативные подходы
- **Использование CSS переменных:** Вы можете использовать CSS-переменные для более гибкой настройки тем. Это позволит вам не дублировать стили и просто менять значения переменных.
- **Media Queries:** Если вы хотите, чтобы темы автоматически переключались в зависимости от системных настроек пользователя, вы можете использовать `prefers-color-scheme`.
```css
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
```
Этот метод автоматически подстраивает цвета при изменении системных предпочтений, хотя он не позволяет пользователю вручную переключать темы.
### Заключение
Сохранять выбор пользователя в `localStorage` — хороший подход, поскольку он обеспечивает консистентность интерфейса при следующем открытии приложения. Выбор между ручным переключением и автоматическим может зависеть от целевой аудитории и функциональных требований вашего приложения.