Как спроектировать тёмную тему для сайта и приложения

Короткий ответ

Хорошая тёмная тема проектируется, а не генерируется. Пять правил закрывают большую часть работы:

1. Тёмно-серый фон, а не чистый чёрный.
2. Глубина через более светлые поверхности, а не через тени.
3. Светлые, менее насыщенные акцентные цвета.
4. Проверенный контраст в обеих темах.
5. Семантические токены, чтобы компоненты переключались автоматически.

Избегайте чистого чёрного и чистого белого

Белый текст на #000000 даёт очень резкий контраст. У части читателей буквы начинают «расплываться» или светиться, и долгое чтение утомляет. Чистый чёрный к тому же не оставляет места для глубины: темнее фон уже не сделать, а тени пропадают.

Начните с тёмно-серой основы — например, Material Design использует #121212 как базовую тёмную поверхность. Для текста берите слегка приглушённый белый вместо #FFFFFF, а для второстепенного текста — более мягкий серый.

У чистого чёрного есть своё место: некоторые приложения предлагают отдельный режим «true black» для OLED-экранов. Просто не делайте его вариантом по умолчанию без проверки.

Глубина через более светлые поверхности

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

Шаги должны быть небольшими и последовательными. Тонкие границы в приглушённом светлом тоне помогают разделить поверхности там, где одной светлоты не хватает.

Приглушённые акценты

Яркие насыщенные цвета, которые хорошо смотрятся на белом, на тёмном фоне начинают «вибрировать» и часто не проходят по контрасту. Используйте более светлые и менее насыщенные оттенки того же тона: если в палитре есть шкала от 50 до 900, тёмная тема обычно берёт более светлые ступени, чем светлая.

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

Проверяйте контраст в обеих темах

Пороги WCAG одинаковы для обеих тем:

• 4,5:1 для обычного текста;
• 3:1 для крупного текста;
• 3:1 для границ элементов управления, иконок и значимой графики.

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

Настройте токены light и dark

Постройте два слоя:

• Примитивные токены — сама палитра: violet-300, grey-900.
• Семантические токены — роли: bg, surface, text, text-muted, border, accent. У каждого есть значение для светлой и для тёмной темы.

Компоненты используют только семантические токены. Тогда смена темы — это замена значений, а не перерисовка экранов. В Figma это Variables с режимами Light и Dark, в коде — CSS-переменные:

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f4f3f7;
  --text: #1a1033;
  --text-muted: #5c5670;
  --accent: #7c3aed;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1e1e22;
    --text: #ececf1;
    --text-muted: #a3a1ad;
    --accent: #a78bfa;
  }
}

Свойство color-scheme подсказывает браузеру адаптировать нативные элементы и полосы прокрутки. Для ручного переключателя продублируйте значения под атрибутом вроде [data-theme="dark"].

Как переключать тему

• По умолчанию следуйте системной настройке.
• Дайте ручной выбор (Светлая / Тёмная / Как в системе) и запоминайте его.
• В вебе применяйте тему до первой отрисовки, чтобы при загрузке страница не мигала неправильными цветами.

Частые ошибки

• Автоматическая инверсия цветов вместо проектирования темы.
• Чисто чёрный фон с чисто белым текстом.
• Те же насыщенные фирменные цвета, что и в светлой теме.
• Глубина только за счёт теней.
• Захардкоженные hex-значения в компонентах, которые игнорируют тему.
• Забытые логотипы, иллюстрации и графики.