Содержание · 7
Как поддержать системную тему, зачем всё равно нужен ручной переключатель и что делать с иллюстрациями, скриншотами и брендовыми цветами.
Три режима вместо двух
Правильная реализация предполагает три варианта: светлая, тёмная и «как в системе». Последний должен быть значением по умолчанию — большинство людей настраивают тему один раз на уровне устройства.
Отсутствие ручного переключателя — тоже ошибка: часть пользователей хочет разные темы в разных приложениях.
Что ломается при переключении
Основные проблемы возникают не с фонами и текстом, а с содержимым, которое не адаптируется: иллюстрации с белым фоном, скриншоты, графики, брендовые логотипы партнёров.
- Иллюстрации — нужна вторая версия или прозрачный фон.
- Скриншоты внутри приложения — «светлое пятно» на тёмном.
- Графики и диаграммы — цвета теряют контраст.
- Логотипы партнёров — часто только тёмная версия.
- Изображения товаров на белом фоне — рамка вокруг них.
Брендовые цвета
Фирменный цвет, разработанный для светлого фона, на тёмном обычно теряет контраст. Прямое использование даёт нечитаемые кнопки и подписи.
Решение — расширенная палитра бренда: для каждого основного цвета есть вариант для тёмной темы, осветлённый и слегка десатурированный.
Переключение без мигания
Приложение или сайт не должны показывать светлый экран на долю секунды перед применением тёмной темы. На вебе это решается синхронным скриптом до отрисовки, в приложениях — установкой темы до показа первого экрана.
Мигание белым в тёмной комнате — та деталь, которую замечают все.
Системная настройка сообщает, чего человек хочет по умолчанию. Ручной переключатель нужен для случаев, когда он хочет иначе именно здесь.
Тени и глубина не работают как в светлой теме
В светлой теме глубина показывается тенью: чем выше элемент, тем она заметнее. На тёмном фоне тень не видна — чёрное на чёрном, — и слои перестают различаться. Поэтому в тёмной теме иерархию строят светлотой поверхности: чем ближе элемент к зрителю, тем светлее его фон.
Практически это означает не одну тёмную краску, а шкалу: фон приложения, фон карточки, фон всплывающего окна отличаются на несколько процентов светлоты. Без этой шкалы интерфейс в тёмной теме выглядит плоским, а модальные окна теряются на фоне.
Изображения и белые подложки
Фотографии, снятые на белом фоне, в тёмной теме превращаются в яркие прямоугольники и бьют по глазам сильнее любого элемента интерфейса. Помогают три приёма: лёгкое приглушение яркости фильтром, скруглённая маска вместо полного прямоугольника и — лучше всего — исходники с прозрачностью, которые переносятся между темами без переделки.
Отдельная категория — логотипы партнёров и иконки платёжных систем: их нельзя перекрашивать по правилам чужого бренда, и для них обычно оставляют светлую подложку с полем. Это осознанное исключение, а не недосмотр, и его стоит описать в дизайн-системе, чтобы не переделывали каждый раз.
Что в итоге
Тёмная тема требует трёх режимов, отдельной палитры и адаптированных иллюстраций — это не переключение переменных.
Обязательно уберите мигание белым при запуске: это самая заметная ошибка реализации.
Коротко
- Можно ли просто инвертировать светлую тему?
- Нет. Чистый чёрный фон с белым текстом даёт ореол вокруг букв, а тени в темноте не работают — глубину показывают более светлой поверхностью. Тёмную тему собирают заново на своей шкале поверхностей.
- Какие цвета менять обязательно?
- Насыщенные акценты: на тёмном фоне они выглядят ярче и режут глаз, поэтому их приглушают. И иллюстрации с белым фоном — они превращаются в светящиеся прямоугольники.
Уведомления в приложении
Частота, время, содержание и настройки. Разбираем, какие уведомления возвращают пользователей, а какие приводят к отключению или удалению.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…