Разработка темной темы (Dark Mode) сайта
Dark mode — это не инверсия цветов. Это отдельная цветовая схема, которую нужно проектировать так же тщательно, как светлую. Простая инверсия (filter: invert(1)) даёт неприемлемый результат: фотографии с негативом, логотипы чёрно-белыми, цветовые акценты инвертированными. Правильный dark mode — это переработка каждого цветового токена.
Почему dark mode сложнее, чем кажется
Светлая тема строится на белом фоне с тёмным текстом — высокий контраст по умолчанию. В тёмной теме нужно создать иерархию поверхностей без использования белого:
- Фон страницы: самый тёмный оттенок
- Surface (карточки, панели): чуть светлее фона
- Surface raised (модалы, dropdown): ещё светлее
- Surface overlay: самый светлый из нейтралов
Типичная шкала для тёмной темы на основе gray (Tailwind-нотация): фон gray-950, поверхность gray-900, raised gray-800, overlay gray-700. Или кастомные значения: #0F0F0F, #1A1A1A, #252525, #2E2E2E.
Проектирование через токены
Правильная архитектура: не хардкодить цвета в компонентах, а использовать семантические токены.
| Токен | Light | Dark |
|---|---|---|
--color-bg-primary |
#FFFFFF |
#0F0F10 |
--color-bg-surface |
#F9FAFB |
#1C1C1E |
--color-bg-raised |
#FFFFFF |
#2C2C2E |
--color-text-primary |
#111827 |
#F9FAFB |
--color-text-secondary |
#6B7280 |
#9CA3AF |
--color-text-disabled |
#D1D5DB |
#4B5563 |
--color-border-default |
#E5E7EB |
#374151 |
--color-accent-primary |
#2563EB |
#3B82F6 |
Обратите внимание: акцентный цвет в dark mode смещается на более светлый оттенок. blue-700 на белом фоне контрастный. Тот же blue-700 на gray-900 — нет: контраст по WCAG AA требует минимум 4.5:1 для основного текста. blue-500 на gray-900 — уже проходит.
Проверка контрастности
Каждую пару текст/фон проверяем по WCAG 2.1:
- Normal text (до 18px обычный / 14px bold): минимум 4.5:1
- Large text (18px+): минимум 3:1
- UI components (иконки, границы): минимум 3:1
Инструменты: Figma плагин Colour Contrast Analyser, WebAIM Contrast Checker, axe DevTools в браузере. В Figma Variables режим dark — это не просто «поменять цвета вручную», а переключение Variable Mode.
Специфика тёмных тем: тени, изображения, иконки
Тени в dark mode не работают: тень box-shadow: 0 4px 16px rgba(0,0,0,0.1) на тёмном фоне невидима. Замена: border: 1px solid var(--color-border-default) или более светлая поверхность (elevation через цвет, не тень).
Изображения и фотографии обычно оставляют без изменений. Иногда добавляют небольшое затемнение: filter: brightness(0.85) — чтобы яркие фото не «выбивались» на тёмном фоне.
Иконки — SVG с currentColor наследуют цвет текста автоматически. PNG и растровые иконки — отдельный набор или фильтрация.
Логотипы — часто нужна светлая версия логотипа для тёмного фона. Это отдельный ассет, не автоматическое переключение.
Реализация переключения
Переключение темы реализуется через CSS класс на <html>:
:root { --color-bg: #fff; }
html.dark { --color-bg: #0f0f10; }
Или через prefers-color-scheme media query для автоматического режима системы. Лучшая практика — оба варианта: системные предпочтения по умолчанию + ручное переключение с сохранением в localStorage.
В Figma Variables → Modes: создаём режимы Light и Dark для каждой коллекции токенов. Переключение происходит в прототипе через Variable Mode Interaction.
Особые случаи: графики, карты, медиа
Графики (Chart.js, Recharts, D3) требуют отдельных цветовых палитр для dark mode. Тёмные серии данных на светлом фоне не читаются на тёмном. Обычно нужны 2 набора цветов серий.
Карты (Google Maps, Mapbox) — переключение на тёмный стиль через отдельный mapId или style. Mapbox: style: 'mapbox://styles/mapbox/dark-v11'. Google Maps: отдельный mapId с тёмным стилем через Cloud Console.
Сроки
| Этап | Время |
|---|---|
| Аудит существующей светлой темы, инвентаризация токенов | 1–2 дня |
| Создание тёмной палитры и проверка контрастности | 2–3 дня |
| Переработка всех компонентов для dark mode | 4–8 дней |
| Спецификация переключения и edge cases | 1–2 дня |
Итого: 8–15 дней на проект с уже готовой светлой темой. Если дизайн-система строится с нуля с двумя режимами сразу — добавляет 30–40% времени к общей разработке дизайна.