Как на JS реализовать переключение темной и светлой темы сайта с сохранением выбора пользователя в localStorage?
Переключение между тёмной и светлой темой — распространённая задача во фронтенд-разработке. Ниже описан полный подход к её реализации с использованием чистого JavaScript и localStorage.
## Шаг 1: Подготовка CSS
Создайте две темы через CSS-переменные или классы. Рекомендуется использовать класс на элементе « или «:
css
body {
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s, color 0.3s;
}
body.dark {
background-color: #121212;
color: #f0f0f0;
}
## Шаг 2: HTML-кнопка переключения
html
## Шаг 3: JavaScript-логика
javascript
// Получаем сохранённую тему из localStorage
const savedTheme = localStorage.getItem(‘theme’);
// Применяем тему при загрузке страницы
if (savedTheme === ‘dark’) {
document.body.classList.add(‘dark’);
}
// Обработчик кнопки
const toggleButton = document.getElementById(‘theme-toggle’);
toggleButton.addEventListener(‘click’, () => {
document.body.classList.toggle(‘dark’);
// Сохраняем выбор пользователя
if (document.body.classList.contains(‘dark’)) {
localStorage.setItem(‘theme’, ‘dark’);
} else {
localStorage.setItem(‘theme’, ‘light’);
}
});
## Шаг 4: Учёт системных настроек пользователя
Если пользователь ещё не выбирал тему вручную, можно опираться на системные предпочтения через `prefers-color-scheme`:
javascript
const savedTheme = localStorage.getItem(‘theme’);
const prefersDark = window.matchMedia(‘(prefers-color-scheme: dark)’).matches;
if (savedTheme === ‘dark’ || (!savedTheme && prefersDark)) {
document.body.classList.add(‘dark’);
}
## Важные нюансы
1. **Место вызова скрипта**: чтобы избежать «мигания» при загрузке, подключайте скрипт инициализации темы в « с атрибутом `defer` или вставляйте инлайново до «.
2. **Обновление иконки кнопки**: меняйте текст или иконку кнопки в зависимости от текущей темы для лучшего UX.
3. **Доступность**: добавьте `aria-label` к кнопке, чтобы скринридеры корректно озвучивали её назначение.
4. **CSS-переменные**: для масштабируемых проектов лучше использовать CSS custom properties (`—bg-color`, `—text-color`) вместо прямых значений — это упрощает поддержку нескольких тем.
Такой подход работает во всех современных браузерах и не требует сторонних библиотек.