Тёмная тема оформления

Как и зачем добавить её в вебе и на мобильных. Гайдлайны платформ, токены, шаблоны, примеры внедрения и просто толковые статьи.

Гайдлайны платформ

Material Design

Статьи и выступления дизайнеров Google:

Подробнейший разбор особенностей создания от Chethan KVS. Он проходится по всем основным аспектам подготовки цветов, состояний элементов, иллюстраций и т.п. Читайте также мощный обзор всех приложений Google на Android с тёмной темой оформления.

Читая аргументацию для тёмной темы ощущаешь дежавю. Ровно те же слова и схожесть решения была в Windows Phone (экономия батарейки в OLED-экранах, меньше устают глаза — 9 лет назад, если чо). Фотошоп перекрасился в тёмный в 2012 году. Штош — главное, что хотя бы в таком виде это доехало до массового пользователя.

Исследования о восприятии тёмной и светлой темы проводила UX-лаборатория Mail.ru Group и Nielsen/Norman Group. В большинстве случаев светлая тема облегчает чтение либо разницы нет.

Новую волну интереса породила прошлогодняя macOS Mojave с тёмной темой оформления. Там же пошли первые толковые статьи на тему:

Недавний тест Engadget показал, что для iPhone с OLED-экранами тёмная тема держит батарейку гораздо лучше.

Токены

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

Самый простой способ сделать это — стилизованные компоненты на React. Можно прикрутить и к генераторам статических сайтов.

Естественно, такое хочется и в инструментах дизайна. Например, плагин Color System для Sketch позволяет организовать переменные для цвета в токены и переключать светлую и тёмную тему. Пара слов от автора.

Письма рассылки

Одна из проблем — это почтовые клиенты, где тело письма приходит в виде HTML и картинок (там может быть что угодно). Alice Li собрала шикарную памятку для создателей писем, также писал про это Kevin Mandeville.

Рассказ о нескольких подходах к автоматизированному перекрашиванию писем рассылки в Яндекс Почте.

Браузеры и сайты

В ближайшем будущем это коснётся и сайтов. Chrome 76 поддерживает тёмную тему на уровне браузера. Если сайт имеет её, она включится автоматом. Firefox тоже в деле. А Chrome 78 и мобильная Opera делают это насильно, даже если сам сайт не умеет. Правда, для Progressive Web Apps пока работает не всё (но есть обходные способы — например, для экрана загрузки).

Adhuhan собрал объёмную памятку. Koos Looijesteijn описывает способ определения тёмной или светлой темы, которую нужно включить пользователю исходя из его настроек и времени дня. Он также делает плавный переход при переключении. Max Böck и Kilian Valkhof дают советы по релизации переключателя. Ну а Jecelyn Yeen показывает, как сделать всё это на личном сайте.

Другие аспекты

Dalton Maag сделали вариативный шрифт, оптимизированный для светлой и тёмной темы оформления.

Кейсы

Вот что рассказывают компании, которые прикрутили её к продуктам:

Superhuman. Шикарная памятка, советы хорошо подкреплены примерами и теоретическими выкладками.
Stack Overflow. Много о манипуляциях с цветом, чтобы добиться гармоничной палитры.
Microsoft. Они раскатили её на все мобильные продукты в офисной линейке. Ещё от них про большой Office.
Discord. Тёмная давно стала самой популярной, но они хотели сделать добротной и привычную светлую тему.
Slack. Они сделали это через токены.
Instagram. Внедрение в iOS-приложении.
Wego. Советы на основе своего опыта.
Clubhose. Они сделали забавный инструмент для сокращения количества цветов, обязательный этап перехода на дизайн-систему.
GitLab. Для редакторов кода это стандарт, но сам веб-интерфейс нужно было проработать.

В общем, если вы ещё не начали делать тёмную тему — эта подборка (и сайт-коллекция от Presh Onyee) срежет кое-какие углы для вас.