Темный режим на сайте: как сделать правильно с помощью CSS и JavaScript
Темный режим уже давно стал не просто модной фишкой, а настоящим стандартом удобного интерфейса. Пользователи ценят возможность переключать тему сайта на темную, особенно в вечернее время. Хорошая новость — реализовать это можно довольно просто. Главное — знать нюансы и не наступать на грабли, на которые часто наступают новички.
Зачем вообще нужен темный режим?
Темный интерфейс снижает нагрузку на глаза, особенно в условиях слабого освещения. Он также может экономить заряд батареи на OLED-дисплеях. Поэтому поддержка темного режима — это не только стиль, но и забота о пользователе.
Кроме того, наличие возможности переключения темы — это плюс к UX и конкурентоспособности сайта. Но чтобы реализовать темный режим CSS и JavaScript средствами корректно, нужно учитывать множество деталей.
Простой способ: включение темного режима через CSS
Самый базовый способ — использовать CSS-переменные и класс, который переключает стили. Это быстро и понятно.
1. Задаем переменные в :root:
```css
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
```
2. Применяем переменные в стилях:
```css
body {
background-color: var(--bg-color);
color: var(--text-color);
}
```
3. Добавляем класс `.dark-mode` и переопределяем переменные:
```css
body.dark-mode {
--bg-color: #121212;
--text-color: #e0e0e0;
}
```
И вот так, без лишних сложностей, у вас готов темный режим CSS.
Как сделать переключение темы на JavaScript
Чтобы пользователь мог сам выбрать тему, нужно добавить немного JavaScript. Вот базовый пример:
```javascript
const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
// Сохраняем выбор пользователя
const isDark = document.body.classList.contains('dark-mode');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
```
А при загрузке страницы проверяем сохраненные настройки:
```javascript
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
}
```
Вот и всё — включение темного режима через CSS и JavaScript работает. Переключение темы сайта на темную теперь в ваших руках.
Частые ошибки новичков
Если вы только начинаете, вот на что стоит обратить внимание, чтобы не наломать дров:
- Забывают использовать CSS-переменные. Многие новички задают цвета напрямую — это усложняет переключение темы. Переменные позволяют централизовать изменения.
- Не сохраняют выбор пользователя. Если не использовать `localStorage`, пользователь будет видеть светлую тему при каждом заходе, даже если выбрал темную.
- Игнорируют системные предпочтения. У некоторых пользователей включен тёмный режим на уровне ОС. Ваш сайт может адаптироваться с помощью медиа-запроса `prefers-color-scheme`.
Пример использования предпочтений пользователя:
```css
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
}
}
```
Как не испортить UX при реализации темной темы
Вот несколько практических советов, чтобы тёмный режим не стал кошмаром для пользователя:
- Проверяйте контрастность. Некоторые цвета хорошо смотрятся на белом фоне, но становятся нечитаемыми на тёмном. Используйте инструменты проверки контрастности.
- Не переусердствуйте с черным цветом. Чисто черный фон (#000000) может быть слишком резким. Лучше использовать темно-серые оттенки, например #121212 или #1e1e1e.
- Продумайте иконки и картинки. Светлые изображения на светлом фоне будут теряться. Используйте SVG с адаптивным цветом или дублируйте изображения для разных тем.
Бонус: как сделать темный режим на сайте без кнопки
Если вы хотите, чтобы темная тема включалась автоматически в зависимости от настроек операционной системы, можно обойтись без JavaScript:
```css
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
}
```
Такой подход прост, но не дает пользователю выбора — это важно учитывать.
Итог
Темный режим — не просто тренд, а полезная фишка, которую легко реализовать. Используйте CSS-переменные, добавьте переключение через JavaScript и не забудьте сохранить выбор пользователя. Учитывайте предпочтения системы, тестируйте цвета и не забывайте о доступности.
Теперь вы знаете, как сделать темный режим на сайте безопасно и удобно — без лишней головной боли и с максимальной пользой для пользователей.
