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

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

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

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

Подготовка CSS: переменные и подходы

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

Создаем базовые переменные

Начните с определения цветовой схемы в корневом элементе:

:root {
  /* Светлая тема (по умолчанию) */
  --primary-bg: #ffffff;
  --secondary-bg: #f5f5f7;
  --primary-text: #1d1d1f;
  --secondary-text: #86868b;
  --accent-color: #007aff;
  --border-color: #d2d2d7;
}

Теперь определите темную тему, используя тот же набор переменных:

.theme-dark {
  --primary-bg: #000000;
  --secondary-bg: #1d1d1f;
  --primary-text: #f5f5f7;
  --secondary-text: #a1a1a6;
  --accent-color: #0a84ff;
  --border-color: #424245;
}

Применяем переменные в стилях

Вместо жестко заданных цветов используйте переменные:

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: 1px solid var(--border-color);
}

JavaScript: логика переключения и сохранение выбора

CSS задает внешний вид, а JavaScript отвечает за интерактивность и сохранение предпочтений пользователя.

Базовый переключатель темы

Создайте простую функцию переключения:

const themeToggle = document.querySelector('#theme-toggle');
const body = document.body;

function toggleTheme() {
  body.classList.toggle('theme-dark');
  
  // Сохраняем выбор пользователя
  const isDark = body.classList.contains('theme-dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

themeToggle.addEventListener('click', toggleTheme);

Определяем системные предпочтения

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

// Проверяем сохраненную тему или системные настройки
function initTheme() {
  const savedTheme = localStorage.getItem('theme');
  
  if (savedTheme) {
    // Используем сохраненную тему
    if (savedTheme === 'dark') {
      body.classList.add('theme-dark');
    }
  } else {
    // Определяем системные предпочтения
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    
    if (prefersDark.matches) {
      body.classList.add('theme-dark');
    }
    
    // Слушаем изменения системных настроек
    prefersDark.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) {
        body.classList.toggle('theme-dark', e.matches);
      }
    });
  }
}

// Инициализируем тему при загрузке страницы
document.addEventListener('DOMContentLoaded', initTheme);

Продвинутые техники и лучшие практики

Доступность и семантика

Не забывайте про пользователей с ограниченными возможностями:

• Используйте достаточный контраст (минимум 4.5:1 для обычного текста)
• Не полагайтесь только на цвет для передачи информации
• Добавьте текстовые метки к переключателю темы

Оптимизация изображений

Для темной темы могут потребоваться разные версии изображений:

/* Светлая версия (по умолчанию) */
.logo {
  background-image: url('logo-light.png');
}

/* Темная версия */
.theme-dark .logo {
  background-image: url('logo-dark.png');
}

Поэтапное внедрение

Если у вас большой существующий проект:

1. Начните с замены цветов на CSS-переменные
2. Протестируйте темную тему на ключевых страницах
3. Добавьте переключатель в навигацию
4. Соберите обратную связь от пользователей

Распространенные ошибки и как их избежать

• Слишком яркие акцентные цвета в темной теме — приглушайте их на 10-20%
• Забыть про состояния элементов — стилизуйте :hover, :focus для обеих тем
• Игнорировать системные настройки — всегда учитывайте prefers-color-scheme
• Не тестировать на реальных устройствах — темная тема по-разному выглядит на разных экранах

FAQ: ответы на частые вопросы

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

Используйте CSS-переменные и JavaScript для добавления/удаления класса. Все изменения применяются мгновенно благодаря CSS.

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

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

Как быть с пользовательским CSS или стилями браузера?

Используйте CSS-переменные с резервными значениями: var(--my-color, #default). Всегда задавайте значения по умолчанию.

Темная тема влияет на SEO?

Нет, поисковые системы не учитывают цветовую тему сайта. Но удобный интерфейс может снизить показатель отказов, что косвенно влияет на SEO.

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

Используйте инструменты разработчика в браузере: в Chrome — Emulate CSS media feature prefers-color-scheme, или расширения типа Dark Reader для сравнения.