Адаптивные тёмные темы в Safari

В новой бете WebKit появилась функция, которая автоматически переводит светлые сайты в тёмный режим. И в отличие от примитивной инверсии, алгоритм действительно пытается действовать «умно»: сохраняет оригинальные оттенки, контролирует контраст текста в рамках WCAG, а также корректно подстраивает цвета SVG-иконкам и логотипам.

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

Что под капотом и в чём нюансы:

Smart Color Engine: Браузер не просто инвертирует rgb(), а пересчитывает цвета в пространстве OKLCH. Это позволяет сохранить воспринимаемую яркость и насыщенность бренда, а не превращать фирменный синий в ядовито-жёлтый.
Анализ контекста: Алгоритм пытается отличать фоновые элементы от контентных изображений. Фотографии и видео не трогаются, а вот векторная графика (<svg>) и фоновые паттерны перекрашиваются на лету.
Opt-out через CSS: Если авто-версия ломает ваш дизайн, от неё можно отказаться с помощью метатега <meta name="color-scheme" content="light"> или CSS-свойства color-scheme: light.

Опять браузеры решают за нас?

Лично я отношусь к такому вмешательству отрицательно. Мы это уже проходили с почтовыми клиентами: тот же Gmail вечно пытался «улучшить» HTML-письма, из-за чего верстальщикам приходилось городить тонны хаков и хардкодить цвета через !important, чтобы письмо просто не рассыпалось.

Когда браузер начинает перерисовывать дизайн на свой вкус, неизбежно вылезают баги:

Проблемы с прозрачностью и PNG: Иконки с неидеальной альфой или белой подложкой мгновенно превращаются в грязь.
Сложные графики и Canvas: Динамические диаграммы и интерактивные Canvas-элементы авто-подстройка часто превращает в нечитаемое месиво.
Разрушение брендинга: Дизайн — это не только читаемость текста, но и атмосфера. Алгоритм не знает контекста вашего продукта.

Вместо того чтобы взваливать на себя роль дизайнеров и плодить непредсказуемые фолбэки, вендорам стоило бы сосредоточиться на развитии инструментов для разработчиков. Автоматика всегда будет ошибаться там, где важна эстетика.

Читать подробнее