Тёмная тема

Тёмная тема — это цветовая схема интерфейса, в которой текст и элементы интерфейса светлые, а фон тёмный.

В построении тёмной темы есть особенности построения лейаута и восприятия цвета. Невозможно получить качественную тёмную тему через простую инверсию светлого режима.

Цвета, которые хорошо работают в светлой теме, в тёмной теме часто смотрятся слишком ярко и агрессивно. Простая инверсия может сломать иерархию слоёв в интерфейсе.

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

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

Если сервис состоит в основном из визуального контента: изображений, видео или графиков, то тёмная тема может лучше сфокусировать пользователя на цветном контенте, приглушив всё фоновое.

В условиях яркой освещённости тёмная тема может быть недостаточно контрастной и вызывать сложности с чтением.

Если сервис состоит из плотно расположенного контента или предназначен для чтения огромного объёма текста, то тёмная тема может быстрее утомлять пользователя.

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

По умолчанию можно включить системную тему. Тогда сервис будет соответствовать окружению.

Сохраняйте выбор пользователя в локальном хранилище браузера Local Storage, чтобы настройки запоминались для текущего устройства пользователя.

Определяйте значение темы до начала отрисовки основного приложения, чтобы минимизировать скачки цвета при открытии страниц или переходах.

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

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

Это нарушит восприятие глубины интерфейса и снизит контрастность.

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

Смягчите мощность контраста, используя для основного текста не чистый белый, а с небольшой прозрачностью. А фоном возьмите тёмно-серый, а не чистый чёрный.

Приглушайте насыщенность у ярких цветов. Так можно избавиться от неприятной ряби на границах фона и сохранить цветность.

Цвета со сниженной насыщенностью выглядят спокойнее и лучше читаются.

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

Для каждой темы подготовьте свой вид иллюстрации.