Тёмный режим в веб-дизайне: лучшие практики и руководство по реализации

Тёмный режим превратился из предпочтения разработчиков в массовое дизайнерское ожидание. Более 80% разработчиков используют тёмный режим в своих IDE, а основные операционные системы теперь включают системные тёмные темы. Пользователи ожидают, что сайты и приложения будут уважать их предпочтения. Это руководство охватывает принципы дизайна, теорию цвета, реализацию на CSS и соображения доступности, необходимые для создания эффективного опыта тёмного режима.

Почему тёмный режим важен

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

Однако неправильно реализованный тёмный режим может быть хуже, чем его отсутствие. Высокий контраст между чисто белым текстом и чисто чёрным фоном вызывает эффект ореола, при котором текст кажется размытым или светящимся. Ключ в нахождении правильного баланса между контрастностью и комфортом.

Теория цвета для тёмного режима

Самая распространённая ошибка в дизайне тёмного режима — простое инвертирование светлой схемы. Этот подход не работает, потому что восприятие цвета меняется на тёмном фоне. Цвета, которые выглядят яркими на белом, могут казаться резкими или подавляющими на тёмных поверхностях, а тонкие различия в светлых оттенках становятся невидимыми на тёмном.

Цвет фона

Избегайте использования чистого чёрного (#000000) в качестве фона. Чистый чёрный создаёт чрезмерный контраст с белым текстом, вызывая напряжение глаз. Вместо этого используйте тёмно-серый с лёгким оттенком для добавления глубины и визуального интереса.

Цвет текста

Аналогично, избегайте чисто белого (#ffffff) для основного текста. Используйте оттенки off-white, которые сохраняют читаемость при снижении бликов. Оставьте чистый белый для заголовков и акцентов.

• Основной текст: #e2e8f0 или #f1f5f9 для комфортного чтения
• Вторичный текст: #94a3b8 для описаний и меток
• Отключённый текст: #64748b для неактивных элементов

Акцентные цвета

Акцентные цвета часто требуют корректировки для тёмного режима. Насыщенные цвета, которые хорошо работают на белом фоне, могут казаться вибрирующими на тёмных поверхностях. Слегка снизьте насыщенность акцентных цветов и увеличьте их яркость, чтобы сохранить видимость без визуальной усталости.

Реализация на CSS

Наиболее поддерживаемый подход к тёмному режиму — использование CSS-пользовательских свойств (переменных) с медиа-запросом prefers-color-scheme. Это позволяет определить цвета один раз и переключать темы, изменяя значения переменных.

Использование CSS-пользовательских свойств

:root {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #3b82f6;
  --border: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #60a5fa;
    --border: #334155;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

Ручное переключение с помощью JavaScript

Хотя prefers-color-scheme обрабатывает системные предпочтения, пользователям также нужно ручное переключение. Сохраняйте предпочтение в localStorage и применяйте его через data-атрибут на корневом элементе.

function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

// On page load
const saved = localStorage.getItem('theme');
if (saved) {
  document.documentElement.dataset.theme = saved;
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.dataset.theme = 'dark';
}

Затем в CSS используйте селектор атрибута вместе с подходом медиа-запроса:

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --text: #e2e8f0;
}

Обработка иерархии и глубины

В светлом режиме тени передают иерархию. В тёмном режиме тени менее заметны на тёмных поверхностях. Вместо этого используйте прогрессивно более светлые цвета фона для обозначения высоты. Каждый слой должен быть немного светлее предыдущего, создавая визуальную иерархию, имитирующую свет, падающий на приподнятые поверхности.

• Уровень 0: базовый фон (самый тёмный)
• Уровень 1: карточки и контейнеры (немного светлее)
• Уровень 2: плавающие элементы, такие как выпадающие меню (светлее)
• Уровень 3: модальные окна и диалоги (самая светлая приподнятая поверхность)

Изображения и медиа в тёмном режиме

Яркие изображения могут казаться резкими на тёмном фоне. Используйте CSS-фильтры для небольшого затемнения изображений в тёмном режиме. Для логотипов и иконок предоставляйте светлые альтернативные версии.

[data-theme="dark"] img {
  filter: brightness(0.9);
}

[data-theme="dark"] .logo-dark {
  display: inline-block;
}

[data-theme="dark"] .logo-light {
  display: none;
}

Соображения доступности

Тёмный режим должен соответствовать тем же стандартам доступности, что и светлый режим. Руководство WCAG 2.1 требует минимального контраста 4.5:1 для обычного текста и 3:1 для крупного текста. Используйте инструмент проверки контрастности для тестирования вашей тёмной темы на соответствие.

• Никогда не полагайтесь только на цвет: используйте иконки, узоры или метки вместе с цветом для передачи информации.
• Тестируйте с помощью скринридеров: убедитесь, что переключение темы доступно и объявляет своё состояние.
• Уважайте prefers-reduced-motion: отключайте или уменьшайте анимацию для пользователей, предпочитающих уменьшенное движение.
• Обеспечьте достаточные индикаторы фокуса: кольца фокуса должны быть видны в обеих темах. Используйте контрастный цвет контура.

Распространённые ошибки тёмного режима

• Использование чисто чёрного фона: создаёт чрезмерный контраст и эффект ореола. Используйте тёмно-серый вместо этого.
• Забывание настроить тени: тёмные тени на тёмном фоне невидимы. Используйте более светлые цвета поверхности для иерархии.
• Игнорирование изображений: яркие изображения на тёмном фоне создают визуальный диссонанс. Примените фильтр яркости или предоставьте тёмные варианты.
• Жёстко закодированные цвета: делают переключение темы невозможным. Всегда используйте CSS-пользовательские свойства.
• Несохранение пользовательских предпочтений: пользователи расстраиваются, если тема сбрасывается при навигации. Сохраняйте предпочтение в localStorage.
• Вспышка нестилизованного контента (FOUC): используйте встроенный скрипт перед CSS для установки темы до рендеринга страницы.