Темная тема на сайте: полное руководство по реализации на CSS и JavaScript

Темная тема перестала быть просто модным трендом — сегодня это обязательный элемент современного пользовательского опыта. Она снижает нагрузку на глаза, экономит заряд батареи на мобильных устройствах и просто выглядит стильно. В этом руководстве мы разберем, как правильно реализовать переключатель темной темы на вашем сайте, используя чистый CSS и минимальное количество JavaScript.

Почему темная тема — это важно

Прежде чем переходить к технической реализации, стоит понять, зачем вообще нужна темная тема. Исследования показывают, что в условиях низкой освещенности темные интерфейсы уменьшают усталость глаз на 30-40%. Для OLED-экранов темная тема может экономить до 30% заряда батареи. Но главное — вы даете пользователям выбор, что значительно повышает лояльность к вашему ресурсу.

Базовый подход: CSS-переменные

Современный способ реализации темной темы — использование CSS-переменных (custom properties). Это позволяет централизованно управлять цветовой палитрой и легко переключаться между темами.

Определяем цветовые схемы

Создадим две палитры — светлую и темную:

:root {
  /* Светлая тема (по умолчанию) */
  --primary-bg: #ffffff;
  --secondary-bg: #f5f5f5;
  --primary-text: #333333;
  --secondary-text: #666666;
  --accent-color: #4a76a8;
}

[data-theme="dark"] {
  /* Темная тема */
  --primary-bg: #1a1a1a;
  --secondary-bg: #2d2d2d;
  --primary-text: #f0f0f0;
  --secondary-text: #b0b0b0;
  --accent-color: #5d9cec;
}

Применяем переменные

Теперь используем эти переменные в стилях:

body {
  background-color: var(--primary-bg);
  color: var(--primary-text);
  transition: background-color 0.3s, color 0.3s;
}

.card {
  background-color: var(--secondary-bg);
  border-color: var(--secondary-text);
}

JavaScript для переключения тем

Добавим интерактивности с помощью простого JavaScript:

const themeToggle = document.querySelector('.theme-toggle');
const currentTheme = localStorage.getItem('theme');

// Проверяем сохраненную тему
if (currentTheme === 'dark') {
  document.documentElement.setAttribute('data-theme', 'dark');
}

// Обработчик клика
themeToggle.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  
  if (currentTheme === 'dark') {
    document.documentElement.removeAttribute('data-theme');
    localStorage.setItem('theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  }
});

Учет системных предпочтений

Современные браузеры позволяют определять системные настройки темы через медиа-запрос prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  :root {
    --primary-bg: #1a1a1a;
    --secondary-bg: #2d2d2d;
    /* и так далее */
  }
}

Но помните: системные настройки должны быть только начальным значением. Если пользователь явно выбрал тему на вашем сайте, его выбор должен иметь приоритет.

Плавные переходы и анимации

Резкая смена темы может дезориентировать пользователя. Добавьте плавные переходы:

* {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}

Однако будьте осторожны — анимирование всех свойств может снизить производительность. Лучше анимировать только необходимые свойства.

Тестирование и доступность

При реализации темной темы проверьте:

• Контрастность текста (минимум 4.5:1 для обычного текста)
• Читаемость шрифтов в обеих темах
• Корректное отображение изображений и иконок
• Работу переключателя с клавиатуры

FAQ: Часто задаваемые вопросы

Как сделать темную тему без перезагрузки страницы?

Используйте CSS-переменные и JavaScript для динамического изменения атрибута data-theme у корневого элемента. Это позволит менять тему мгновенно.

Нужно ли создавать отдельные CSS-файлы для разных тем?

Нет, современный подход с CSS-переменными позволяет хранить все стили в одном файле. Это упрощает поддержку и уменьшает количество HTTP-запросов.

Как сохранить выбор пользователя?

Используйте localStorage для сохранения значения темы. При загрузке страницы проверяйте сохраненное значение и применяйте соответствующую тему.

Что делать с изображениями в темной теме?

Для изображений можно использовать несколько подходов: уменьшать яркость через CSS-фильтры, использовать разные версии изображений или просто оставлять как есть, если они хорошо смотрятся в обеих темах.

Как протестировать темную тему?

Используйте инструменты разработчика в браузере: в Chrome/Edge есть эмуляция prefers-color-scheme, также можно вручную менять атрибуты и проверять контрастность с помощью Lighthouse.