Тёмная тема (Dark Mode) в интерфейсах

Рассказываем об особенностях тёмной темы для сайтов и приложений, объясняем, почему она стала популярна и как сделать её в интерфейсе. Также развеиваем мифы о Dark Mode.

Dark Mode (тёмная тема) — это альтернатива светлой цветовой схеме интерфейса, где фон становится тёмным, а текст — светлым. На пике популярности он оказался несколько лет назад, когда многие пользователи начали массово переходить на него на смартфонах, ноутбуках и в приложениях. Визуально он воспринимался как современный, премиальный и чуть более «айтишный» стиль, особенно среди дизайнеров и разработчиков.

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

В Яндекс Картах можно установить светлую или тёмную тему

Исследование «Dark vs. Light Mode on Smartphones: Effects on Eye Fatigue» показало значительное снижение усталости глаз при ярком свете, но эффекта нет при тусклом освещении, то есть польза тёмной темы для глаз сильно зависит от окружающей среды

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

Также говорят, что тёмная тема помогает «сфокусироваться на контенте». На самом деле внимание пользователей определяется не фоном, а качеством и структурой самого контента, шрифтами, визуальными акцентами. Более того, белый текст на тёмном фоне не всегда читается хорошо. Поэтому хороший дизайн в Dark Mode — это не просто инверсия цветов, а аккуратная работа с типографикой.

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

Одного этого преимущества достаточно, чтобы Dark Mode использовался во многих и при этом совершенно разных проектах. Например, сделать тёмную тему можно на таких сайтах и в таких приложениях и сервисах, как ChatGPT, Rutube, Gmail, VK и Figma.

Возможность изменить тему предоставляют даже государственные сервисы — например, приложение «Госуслуг»

Разберёмся, когда имеет смысл сделать тёмную тему.

● Массовый продукт. Чем шире аудитория, тем выше шанс, что среди пользователей найдутся те, кто будет ждать наличия Dark Mode. Возьмём для примера приложение доставки еды. Люди, которые пользуются им ежедневно, часто ожидают, что интерфейс станет более гибким и будет автоматически переключаться на тёмную тему при заказе продуктов ночью или даст пользователю возможность самостоятельно изменить режим.
● «Эстетский» продукт или продукт с акцентом на пользовательский опыт. Например, редактор заметок Bear использует Dark Mode как часть имиджа. В приложении есть не только стандартные светлая и тёмная темы, но и кастомные палитры. Это превращает выбор цветовой схемы в элемент персонализации и маркетинга.

● B2B-софт, у которого есть крупные корпоративные клиенты. Часто у таких заказчиков есть свои требования по цветовой схеме или они используют собственный фирменный стиль. В одних случаях нужна только тёмная тема, в других — только светлая, в третьих — и та, и другая.

В то же время есть ситуация, в которой добавлять Dark Mode нет смысла, — мелкий продукт: например, MVP, сайт-визитка или промолендинг на пару экранов, которые нужно сделать за неделю. Здесь важнее скорость и базовая работоспособность, чем гибкость в цветовых схемах.

Если же тёмную тему всё-таки решено добавить, вот три момента, на которые стоит обратить внимание:

1. Анализ фреймворка. Часто бывает, что на проекте используется UI-фреймворк или дизайн-система, в которой уже есть встроенный Dark Mode. В этом случае его можно легко добавить без дополнительных затрат. Это часто бывает, например, в Material UI, Tailwind или Bootstrap-темах.
2. Адаптация под системную тему. На уровне настроек операционной системы через prefers-color-scheme пользователи могут задать тему по умолчанию, и интерфейс должен под неё подстроиться автоматически. Это удобно, но важно предусмотреть ручной переключатель темы интерфейса для тех, кто захочет сделать выбор самостоятельно.
3. Тестирование. Некоторые операционные системы, например Windows, могут включить режим High Contrast Mode, который сам переопределит цвета сайта или приложения, перекрасит элементы и может нарушить изначально задуманный дизайн. Поэтому важно протестировать, как интерфейс работает в разных режимах.

Есть три ошибки при внедрении Dark Mode, которые часто портят впечатление от интерфейса:

● Жёсткий контраст. Слишком чёрный фон (#000000) и слишком белый текст (#FFFFFF) вызывают зрительный дискомфорт, особенно при длительном чтении. Лучше использовать тёмно-серый фон и мягкие оттенки белого, например #E0E0E0.
● Слишком тонкие шрифты. Светлый текст на тёмном фоне визуально кажется ещё тоньше. Тонкие начертания становятся плохо читаемыми, особенно на небольших экранах.
● Использование теней. Тёмная тень на тёмном фоне либо вообще не видна, либо выглядит «грязно». Особенно это критично для карточек, кнопок и других элементов интерфейса. Добавление цветных теней и glow-эффектов также не лучший вариант. Например, синяя кнопка с синеватым свечением выглядит размыто и теряет чёткость.

Теперь разберём нюансы тёмной темы, которые важно учитывать уже на этапе проектирования.

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

Во-вторых, автоматическая поддержка Dark Mode не всегда работает корректно без доработки. Даже если используется UI-фреймворк со встроенной тёмной темой, результат нужно проверить. Часто интерфейс, который выглядит чисто и сбалансированно в светлой теме, после автопереключения становится визуально небрежным. Возможно, макеты были спроектированы без учёта особенностей тёмного режима и «ломают» логику дизайн-системы. В этом случае лучше не настраивать Dark Mode вручную, а пересмотреть исходные макеты, чтобы они корректно работали в обеих цветовых схемах.