В этой статье
Scott
Для тёмной темы нужны читаемый текст, различимые элементы управления и понятные отношения между поверхностями. Замена белого фона на чёрный — лишь отправная точка. В этом руководстве разберём, как определить роли цветов и использовать их и в светлом, и в тёмном оформлении.
В общем рабочем пространстве дизайн-системы Pixso организуйте повторно используемые компоненты и стили по их назначению. Прежде чем распространять тему на множество экранов, согласуйте с разработчиками названия и ожидаемый внешний вид элементов.
Выберите тёмный фон и читаемый текст
В тёмном интерфейсе нужно осознанно выстроить отношения между фоном, поверхностями и текстом. Фон может быть чисто чёрным или тёмно-серым. Выбирайте его с учётом содержимого, условий просмотра и необходимого разделения поверхностей, а затем проверяйте фактические сочетания цветов переднего плана и фона.
Единственного обязательного HEX-значения для тёмной темы нет. Распространённый оттенок тёмно-серого может стать отправной точкой, но его популярность не доказывает, что любой соседний цвет будет хорошо различим.
Одним читателям очень яркий текст на тёмном фоне неприятен, другим такое сочетание нравится. Не приписывайте паре цветов универсальные медицинские свойства. Обеспечивайте читаемость, учитывайте предпочтения пользователей и оценивайте интерфейс в тех условиях, в которых им будут пользоваться.
Определите небольшой набор ролей для поверхностей и текста. Основному холсту, карточке и перекрывающему элементу могут понадобиться разные заливки или границы, чтобы их края оставались различимыми. Проверяйте основной и второстепенный текст отдельно: слишком бледное пояснение бывает трудно прочитать, даже если у заголовков контраста достаточно.
Адаптируйте фирменные цвета к их роли
Для акцентного цвета бренда, который хорошо работает на светлой странице, на тёмной поверхности может понадобиться другое значение. Оценивайте его в конкретной роли: текстовая ссылка, фон кнопки, выбранный элемент управления или декоративная фигура. У этих случаев разные окружающие цвета и требования.
Корректируйте светлоту или насыщенность, когда проверка выявляет проблему, вместо того чтобы автоматически снижать насыщенность всех цветов. Сохраняйте узнаваемую связь с брендом и подбирайте значения, которые обеспечивают читаемость и различимость в тёмной теме.
Используйте визуальные акценты для наиболее полезных действий и состояний. Проверяйте не только элементы управления, но и логотипы с иллюстрациями: изображению с неизменяемым белым фоном может потребоваться версия для тёмной темы, тогда как другое можно оставить без изменений.
Соберите решения по теме в одном месте
Общие компоненты и именованные цветовые стили упрощают проверку изменений. Держите рядом характерные светлый и тёмный экраны, чтобы после изменения подписи или структуры компонента требования к одной из версий не остались неясными.
Инструмент дизайна помогает поддерживать визуальную спецификацию, но приложению всё равно нужны логика выбора темы и её реализация. Корректный предпросмотр на холсте не доказывает, что работающий продукт правильно переключает все состояния.
Храните согласованные значения цветов, примеры компонентов и открытые вопросы рядом с дизайном. Комментарии команды помогают обсудить конкретную поверхность или состояние, а при передаче в разработку должно быть ясно, какую версию нужно реализовать.
Называйте цвета по назначению
Цветовые имена проще поддерживать, когда они отражают назначение. В большой системе можно разделить исходные значения, семантические роли и роли конкретных компонентов. Небольшому продукту достаточно начать с короткого набора ролей, не создавая три уровня без необходимости.
Исходные значения обозначают доступные цвета, например Gray-900 или Blue-500. Эти имена описывают палитру, но не объясняют, следует ли применять цвет к фону страницы или к выбранному элементу управления.
Семантическая роль описывает задачу: фон страницы, приподнятая поверхность, основной текст, второстепенный текст или критически важное сообщение. Для каждой роли можно задать подходящее значение в светлом и тёмном оформлении, сохранив её смысл.
Роли компонентов полезны, когда элементу управления нужно более конкретное правило, например цвет границы поля ввода в фокусе. Добавляйте их там, где они проясняют реальное поведение, вместо того чтобы создавать отдельный токен для каждого экземпляра.
Документируйте оба значения каждой общей роли и применяйте соответствующие Color Styles — цветовые стили — к характерным фреймам. Согласуйте, как эти имена соотносятся с реализацией. Таблица ролей позволяет передать спецификацию, даже если дизайн-файл и приложение хранят данные в разных форматах.
После изменения значения проверьте компоненты, которые его используют. Цвет, улучшивший читаемость подписи на странице, может ухудшить её внутри акцентной кнопки. Общие стили сокращают повторяющееся редактирование, но не отменяют проверку сочетаний.
Следующий шаг в реализации — использовать дизайн-токены для переключения тем: руководство на английском. Значение цвета будет меняться между режимами, а его назначение должно оставаться неизменным.
Разделяйте поверхности и перекрывающие элементы
Глубина должна оставаться понятной и в тёмном интерфейсе. В светлом оформлении тень может отделять перекрывающий элемент от страницы под ним, но это лишь один из возможных признаков, а не обязательное условие для любого такого элемента.
На тёмном фоне тень бывает трудно различить. Разделяйте поверхности подходящим сочетанием заливки, границы, отступов и тени, вместо того чтобы поручать одной тёмной тени передачу всей иерархии.
Один из вариантов иерархии — более тёмная основа и чуть более светлые карточки и перекрывающие элементы. Рассматривайте это как соотношение, которое нужно проверить, а не как фиксированные уровни для любого продукта. Сравните перекрывающий элемент со всеми поверхностями, над которыми он может появиться, включая изображения и акцентные области.
Тонкая граница может прояснить край перекрывающего меню. Её итоговый цвет зависит от непрозрачности и фона под ней, поэтому оценивайте результат после наложения. Не выбирайте белую границу с низкой непрозрачностью только потому, что она хорошо выглядит на одной примерной карточке.
Проверьте состояния компонентов и контраст
Проверьте используемые в тёмной теме компоненты: кнопки, поля форм, таблицы и диалоговые окна. Для каждого рассмотрите нужные состояния: обычное, наведение, фокус, нажатие, выбор, недоступность и ошибка. Одна лишь смена фона основного фрейма не охватывает все эти сочетания.
Для уровня AA в WCAG 2.2 обычному тексту, как правило, нужен контраст не ниже 4.5:1, крупному — не ниже 3:1; в критерии определены исключения. Сначала выясните по пояснениям W3C о контрасте на английском, какое требование применимо, а затем измерьте реальные цвета.
Используйте инструмент проверки контраста для каждой значимой пары цветов переднего плана и фона. Включите выбор, наведение, фокус и ошибку, а не только обычное состояние кнопки. Описывайте ошибки текстом с полезной подсказкой и различайте состояния не одним лишь цветом. Проверка контраста — часть оценки доступности, а не подтверждение соответствия всем её требованиям.
Практический пример: панель настройки оформления
Возьмём панель с вариантами «Светлая», «Тёмная» и «Системная», коротким пояснением и подтверждением сохранения. На этом небольшом экране можно проверить несколько ролей без полного изменения дизайна всей панели управления.
| Роль | Где применить | Что проверить в обеих темах |
|---|---|---|
| Поверхности страницы и панели | Холст и карточка настроек | Граница карточки различима, но не отвлекает от её содержимого. |
| Основной и второстепенный текст | Заголовок, подписи и пояснение | Пояснение остаётся читаемым, а не сливается с поверхностью. |
| Выбранный вариант | Активный вариант оформления | Выбор обозначается маркером или подписью в дополнение к цвету. |
| Индикатор фокуса | Вариант с клавиатурным фокусом | Фокус отличается от выбранного состояния. |
| Обратная связь | Подтверждение сохранения или сообщение об ошибке | Сообщение объясняет результат и сохраняет читаемый контраст. |
Проверьте выбор тёмной темы при активном системном режиме, возврат к системному режиму и повторное открытие панели. Если сохранение не удалось, интерфейс не должен молча показывать несохранённый вариант как постоянную настройку. Отделяйте выбранное предпочтение от оформления, которое в данный момент демонстрирует предпросмотр.
Затем откройте перекрывающий элемент над панелью. Его граница, действие закрытия и состояние фокуса должны оставаться понятными. Так обнаруживаются сочетания, которые невозможно показать на одном листе цветовых образцов.
Опишите поведение темы для разработчиков
Определите, как продукт выбирает оформление. Удобный набор вариантов — «Светлая», «Тёмная» и «Системная»: системный режим следует предпочтению устройства, а явный выбор может иметь приоритет. Укажите, что происходит при следующем посещении и при изменении настройки операционной системы.
Передайте разработчикам цветовые роли обеих тем, поведение выбора и согласованную версию дизайна. Храните эти сведения рядом с соответствующими экранами в Pixso. Сохранение настройки, обработку системных предпочтений и реальные состояния компонентов разработчикам по-прежнему нужно реализовать.
Начните с одного характерного экрана, на котором есть обычный текст, поле ввода, выбор и перекрывающий элемент. Когда их состояния будут согласованно работать вместе, распространите те же роли на остальные экраны и проверьте исключения: графики, иллюстрации и встроенный контент.
