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

Material Design

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

• Пара слов от их дизайнеров
• How to Design a Dark Theme Using Material‍
• Dark Theme & Gesture Navigation‍
• Design a dark theme with Material and Figma

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

iOS и macOS

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

• Introducing Dark Mode
• Implementing Dark Mode on iOS‍
• Supporting Dark Mode in Your Web Content‍
• Advanced Dark Mode

Windows

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

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

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

1. Andy Clarke: поддержка на сайте через media queries.
2. Marcin Wichary: изменение ключевых переменных в CSS.
3. Один из самых дешёвых способов реализации через режимы наложения в CSS.

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

Токены

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

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

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

‍