​Накопилась очередная пачка материалов о тёмной теме оформления. Переработал полную статейку-коллекцию и собрал в ней всё вместе.

1. NN/g: выкладки из исследований о восприятии тёмной и светлой темы. В большинстве случаев светлая тема облегчает чтение.

2. Моя бывшая коллега Ксения Стернина рассказывала о похожем исследовании в Mail.ru Group.

3. Stack Overflow: много о манипуляциях с цветом, чтобы добиться гармоничной палитры.

4. Catalin Red: как менять favicon сайта.

5. Josh W Comeau: поддержка в сайтах на генераторе Gatsby.

6. Blessing Krofegha: инструкция по созданию через механизм стилизованных компонентов на React.

7. Max Böck: как быстро и дёшево сделать переключатель.

8. Kilian Valkhof: советует не делать простой переключатель светлой и тёмной темы на сайте, а добавить возможность оставить выбор на уровне системы.

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

#designsystems #darkmode

​Лёгкая добавка к коллекции материалов о создании тёмной темы оформления. Для тех, кто хочет иногда побыть мрачным, как во вселенной DC:

1. Годная памятка по разным аспектам реализации тёмной темы оформления в вебе от Adhuham. Больше про вёрстку, но достаточно развёрнуто.

2. GitLab: как внедряли. Для редакторов кода это стандарт, но сам веб-интерфейс нужно было проработать.

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

4. Инструкция от Jecelyn Yeen.

5. Телеканал Пятница сделал тёмную тему для ночного эфира. После 23:00 яркие и громкие проморолики заменит тихая, спокойная айдентика со сказками и стихотворениями.

6. Ростелеком Ключ. Правда, только дизайнерская часть, без дизайн-системы в коде.

7. Ну и на сдачу — лучшая в мире переключалка (в правом верхнем углу).

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

#designsystems #darkmode

Вал новостей по внедрению тёмной темы давно спал, но на пыльной полке завалялась эта мини-подборка и надо отпустить её на волю:
 
1. Brad Frost: Предлагает разделять тёмную тему и инвертированный режим в дизайн-системах. Они могут решать одинаковые задачи (например, смена цвета текста и иконок), но это вызвано разными ситуациями — общая настройка устройства пользователя или конкретный блок в интерфейсе.

2. Figma: Создание тёмной темы. Ещё один пример того, что этот переход — один из главных драйверов перехода к семантическим токенам.
 
3. Danny Banks: Инструкция по созданию тёмной темы на фреймворке Style Dictionary, облегчающем поддержку токенов.
 
4. Поддержка в вебе:
— Lea Verou: Как быстро реализовать тёмную тему через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.
 
— Chris Coyier: Проблема дёрганого автоматического переключения между обычной и тёмной темой в браузере.
 
— Bramus Van Damme: Переключение тёмной темы должно быть кнопкой в самом браузере, а не на конкретном сайте. Это сэкономит много лишнего кода. Он показывает своё предложение по реализации.
 
— Ryan Feigenbaum: Памятка по созданию переключателя тёмной темы на сайте.
 
5. Robin Rendle: Создание тёмной темы для сервиса Sentry.
 
Черновик подборки лежал аж с марта прошлого года, так что пшикните пару раз освежителем убрать запах нафталина.

#designsystems #darkmode