Несколько лет назад один из наших клиентов в Kosmoweb - пражский финтех-стартап - попросил нас добавить переключатель тёмного режима в их дашборд. Мы думали, что это займёт пару дней. В итоге потребовалось две недели, потому что мы быстро обнаружили, что тёмный режим - это не просто инверсия цветов. Он требует собственного языка дизайна, собственной палитры и внимательного отношения к каждому элементу на странице. Этот опыт изменил наш подход ко всем последующим проектам.
В чём суть тёмного режима?
Тёмный режим превратился из нишевого предпочтения в стандартное ожидание. Операционные системы, браузеры и крупные приложения предлагают его, и пользователи привыкли переключаться между светлым и тёмным режимами в зависимости от окружения. Для многих тёмный режим снижает нагрузку на глаза во время ночного просмотра. Для других он просто выглядит более утончённо.
С точки зрения дизайна тёмный режим вводит ограничения, которые заставляют принимать более взвешенные решения. Вы не можете полагаться на тонкие серые границы или слабые тени так же, как на белом фоне. Каждый элемент должен заслужить своё место и оставаться читаемым на тёмной поверхности. Результат, когда всё сделано правильно, - это интерфейс, который выглядит продуманным и отполированным.
Правильный выбор цветов
Самая распространённая ошибка, которую мы видим, - выбор чистого чёрного (#000000) в качестве цвета фона. Хотя это кажется логичной противоположностью белому, чистый чёрный создаёт жёсткий контраст, который утомляет глаза при длительном чтении. Рекомендации Material Design от Google советуют использовать тёмно-серые тона - что-то в диапазоне от #121212 до #1E1E1E - и наш опыт это подтверждает.
Для акцентных цветов необходимо снизить насыщенность. Яркий электрический синий, который прекрасно выделяется на белом фоне, может казаться агрессивным и ослепительным на тёмных поверхностях. Мы обычно снижаем насыщенность на 15–25% и немного увеличиваем яркость для вариантов в тёмном режиме. Во время недавнего проекта для платформы электронного обучения мы создали специальную систему цветовых токенов, где каждый акцентный цвет имел значения как для светлого, так и для тёмного режима, связанные через CSS custom properties.
Глубина тоже работает по-другому. В светлом режиме вы используете тени для создания объёма. В тёмном режиме тени растворяются в фоне. Вместо этого вы создаёте глубину, используя постепенно более светлые цвета поверхности - карточка может находиться на уровне #1E1E1E на фоне #121212, а модальное окно подниматься до #2C2C2C.
Шрифт имеет значение
Типографика ведёт себя иначе на тёмном фоне. Светлый текст на тёмной поверхности кажется немного жирнее, чем тот же текст на белом, - оптическая иллюзия, известная как ореол свечения. Это означает, что если текст основного контента в светлом режиме использует жирность шрифта 400, возможно, стоит снизить её до 350 или настроить межбуквенное расстояние в тёмном режиме, чтобы сохранить тот же визуальный вес.
Цвет шрифта тоже важен. Чисто белый (#FFFFFF) текст на тёмном фоне создаёт ту же проблему жёсткого контраста, что и чисто чёрный фон. Мы обычно используем приглушённо-белые значения - #E0E0E0 для основного текста, а #FFFFFF оставляем только для заголовков или элементов высокой значимости. Это создаёт естественную иерархию без напряжения для читателя.
Тестирование
Тестирование тёмного режима требует большего, чем просто быстрое переключение. Мы создаём контрольный список для каждого проекта: проверяем каждое состояние страницы, включая пустые состояния, состояния ошибок и скелеты загрузки. Проверяем элементы форм - поля ввода, выпадающие списки, чекбоксы, - так как они часто наследуют браузерные стили по умолчанию, которые хорошо выглядят в светлом режиме, но ломаются визуально в тёмном.
Мы также тестируем на разных устройствах и экранах. OLED-дисплей отображает тёмный режим иначе, чем IPS LCD-панель, потому что пиксели OLED фактически выключаются для истинного чёрного, создавая более резкие границы контраста. Во время одного проекта для сайта-портфолио фотографа изображения, которые выглядели потрясающе на наших студийных мониторах, казались блёклыми на AMOLED-телефоне клиента, потому что окружающая темнота смещала восприятие зрителем яркости изображения.
Инструменты автоматизированного визуального регрессионного тестирования, такие как Percy или Chromatic, могут выявлять неожиданные регрессии в тёмном режиме при внесении обновлений. Мы интегрируем их в наш CI-конвейер, так что каждый pull request генерирует сравнительные скриншоты для обоих режимов.
Не забывайте о свете
Это может звучать очевидно, но как только команды начинают проектировать для тёмного режима, они иногда упускают из виду светлую тему. Оба режима заслуживают равного внимания. Мы рассматриваем их как два выражения одной дизайн-системы, а не первичную и вторичную версии.
Переход между режимами должен быть плавным. Когда пользователь переключается со светлого на тёмный, макет, интервалы и иерархия контента должны оставаться идентичными - меняются только цвета поверхности и тона текста. Если переключение режимов создаёт ощущение, что пользователь попал на другой веб-сайт, что-то пошло не так.
Финальные штрихи
Уважайте системные настройки пользователя по умолчанию, используя медиа-запрос prefers-color-scheme, но всегда предоставляйте ручное переключение. Некоторые пользователи предпочитают тёмный режим везде, кроме определённых веб-сайтов, и предоставление им контроля укрепляет доверие.
Сохраняйте предпочтение в local storage или cookie, чтобы оно сохранялось между сеансами. Нет ничего более раздражающего для пользователя, чем выбор тёмного режима и белая вспышка при следующем посещении перед запуском JavaScript. Для сайтов с серверным рендерингом мы используем подход на основе cookie, чтобы правильная тема загружалась с первой отрисовки, полностью устраняя эту вспышку.
В Kosmoweb мы пришли к тому, что рассматриваем тёмный режим не как запоздалую мысль или функцию переключения, а как фундаментальную часть дизайна интерфейса. Дисциплина, которую он требует - точный выбор цветов, продуманная корректировка типографики, тщательное тестирование - в конечном итоге делает оба режима лучше.