Темная тема: отдельная палитра, а не инверсия

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

Темная тема формирует отдельную палитру. У нас в портфолио, например, зеленый primary в светлой теме глубокий #49663f, а в темной становится светлым #8fbb7c. Это разные цвета с одной ролью: оба держат контраст 4.5:1 на своей поверхности. Инверсией такое не получить.

Акцентные цвета проектов доставляют отдельную боль. Бейдж «рабочий проект» в карусели красится в фирменный цвет кейса, и один и тот же хекс на белом читается, а на темном тонет. Мы держим по два оттенка на проект и переключаем их вместе с темой.

Проверяется все это не глазами, а прогоном axe в обеих темах: у нас в CI темная тема идет отдельным тестом. Глаза привыкают к макету за полчаса, а сканер нет.

Если у вашего сайта темная тема почти готова и остались мелочи, присылайте, посмотрим. Обычно мелочей там на неделю.