Тёмная тема (Dark Mode)

Тёмная тема — не просто «инвертированные цвета». Чтобы интерфейс оставался удобным и читаемым, её нужно проектировать отдельно: продумать оттенки фона, контраст, глубину и состояния элементов.

Зачем нужна тёмная тема

Главная причина — комфорт. В темноте яркий белый экран слепит, а тёмный интерфейс воспринимается мягче. Многим просто нравится такой вид, и возможность выбрать тему повышает удовлетворённость продуктом.

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

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

Переключатель темы обычно размещают в настройках профиля или в шапке сайта. Хорошая практика — три варианта: светлая, тёмная и «как в системе».

Экран мобильного приложения в светлой и тёмной теме рядом

Правила проектирования тёмной темы

Не используйте чисто чёрный фон. Глубокий тёмно-серый (около #121212) мягче для глаз и позволяет показывать глубину. Чистый белый текст на чёрном создаёт слишком резкий контраст — лучше слегка приглушённый светлый.

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

Приглушайте яркие цвета. Насыщенные цвета на тёмном фоне «вибрируют» и утомляют. Для тёмной темы обычно берут более светлые и менее насыщенные версии фирменных цветов.

Проверяйте контраст. Текст и значимые элементы должны соответствовать требованиям WCAG в обеих темах. Подробнее — в уроке «Цветовая доступность».

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

Схема: чем выше элемент интерфейса, тем светлее его поверхность в тёмной теме

Как сделать тёмную тему в Figma

Удобнее всего сразу строить интерфейс на переменных и дизайн-токенах. Вместо конкретных цветов компоненты используют смысловые названия — «фон», «поверхность», «основной текст», «акцент». В Figma для них создают два режима, Light и Dark, и переключают тему одной настройкой у фрейма. Так тёмная версия появляется для всех экранов сразу, а дизайн-система остаётся единой.

В вёрстке системную настройку пользователя определяют через CSS-медиазапрос prefers-color-scheme, а выбранную тему запоминают, чтобы она не сбрасывалась при следующем визите.

Связанные термины

Цветовая схема — набор цветов интерфейса и правила их сочетания.
Контраст — разница между элементами, влияющая на читаемость.
Дизайн-токены — переменные, которые позволяют переключать темы.
Переключатель — элемент, которым обычно меняют тему.

Частые вопросы о тёмной теме

Что такое тёмная тема простыми словами?

Это режим интерфейса, в котором фон тёмный, а текст и элементы светлые. Его включают для комфорта в темноте, экономии батареи или просто потому, что так нравится.

Правда ли тёмная тема экономит батарею?

Да, но только на устройствах с OLED-экранами: в них тёмные пиксели потребляют меньше энергии. На LCD-экранах экономия минимальна.

Какой цвет фона использовать для тёмной темы?

Обычно используют глубокий тёмно-серый, например #121212, а не чистый чёрный. Он мягче для глаз и позволяет показывать уровни поверхностей более светлыми оттенками.

Нужно ли делать тёмную тему для сайта?

Для приложений и сервисов, которыми пользуются долго и в разное время суток, — желательно. Для простого сайта это не обязательно, но если тема есть, она должна быть так же продумана, как светлая.