Тёмная тема в приложении: системная настройка и переключатель

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

Три режима вместо двух

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

Отсутствие ручного переключателя — тоже ошибка: часть пользователей хочет разные темы в разных приложениях.

Что ломается при переключении

Основные проблемы возникают не с фонами и текстом, а с содержимым, которое не адаптируется: иллюстрации с белым фоном, скриншоты, графики, брендовые логотипы партнёров.

Брендовые цвета

Фирменный цвет, разработанный для светлого фона, на тёмном обычно теряет контраст. Прямое использование даёт нечитаемые кнопки и подписи.

Решение — расширенная палитра бренда: для каждого основного цвета есть вариант для тёмной темы, осветлённый и слегка десатурированный.

Переключение без мигания

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

Мигание белым в тёмной комнате — та деталь, которую замечают все.

Тени и глубина не работают как в светлой теме

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

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

Изображения и белые подложки

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

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

Что происходит с текстом

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

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

Тёмная тема за пределами приложения

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

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

Что в итоге

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

Обязательно уберите мигание белым при запуске: это самая заметная ошибка реализации.