Адаптивная тёмная тема в Safari 27.3: как браузер инвертирует стили без поломки дизайна

Вспомни то неприятное ощущение, когда ты ночью в полутемной комнате листаешь ленту на смартфоне или читаешь статьи на ноутбуке с включенной системной темной темой, кликаешь по ссылке из поисковика — и экран буквально взрывается ослепительным белым светом («flashbang effect»).

Хотя общесистемное темное оформление появилось в iOS и macOS еще в 2019 году (весной 2019 года именно Safari 12.1 стал первым браузером, реализовавшим медиазапрос prefers-color-scheme: dark), реальность мирового веба до сих пор остается суровой. По официальной статистике команды WebKit, сегодня почти 40% всех просмотров страниц совершают пользователи с активной темной системной темой. При этом реальную поддержку темного режима за прошедшие годы внедрили лишь около 10% сайтов.

Чтобы защитить глаза миллионов пользователей и при этом не превратить авторский дизайн сайтов в кашу, инженеры WebKit (Саймон Фрейзер, Джен Симмонс и Люмин Инь) представили в Safari 27.3 интеллектуальный режим Adaptive Dark Mode, подробно разобранный в Веб-стандартах.

Почему наивная инверсия убивает дизайн

Большинство сторонних расширений (вроде Dark Reader в упрощенных режимах) работают по топорному принципу: применяют глобальный CSS-фильтр filter: invert(1) hue-rotate(180deg).

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

В WebKit создали принципиально иную математическую модель адаптации:

1. Инверсия яркости с жестким сохранением цветового тона (Hue Preservation): алгоритм инвертирует только показатель светлоты (luminosity). Теплый кремовый или бежевый фон превратится в темно-серый, но сохранит приятный теплый подтон, а синяя кнопка бренда останется синей, а не станет оранжевой;
2. Контроль контрастности по стандарту WCAG 4.5:1: браузер динамически анализирует цвет текста и фона, гарантируя безупречную читаемость даже тонких начертаний шрифтов;
3. Умная защита медиа и векторной графики: контентные фотографии (<img>) и канвасы (<canvas>) не затрагиваются вообще. Векторные SVG-иконки инспектируются в DOM: движок адаптирует цвета обводок (stroke) и заливок (fill), чтобы графика не терялась;
4. Анализ гистограмм логотипов: Safari анализирует пиксели растровых логотипов и выборочно инвертирует только черно-белую корпоративную графику;
5. Отключение конфликтующих эффектов: режимы наложения mix-blend-mode и сложные CSS-маски автоматически деактивируются на модифицированных блоках, если алгоритм фиксирует риск появления графических артефактов.

Правило нулевого вмешательства: когда Safari молчит

Adaptive Dark Mode — это опциональная пользовательская настройка (opt-in). Если сайт уже позаботился о своих читателях и объявил нативную поддержку темной темы, Safari не производит ни малейших модификаций.

Чтобы браузер понял, что страница умеет переключаться сама, достаточно указать стандартное свойство:

/* Декларируем нативную поддержку светлой и темной темы в CSS */
:root {
  color-scheme: light dark;
}

body {
  /* Используем нативную функцию light-dark для автоматического выбора цвета */
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#1f2328, #e6edf3);
}

Или добавить аналогичный метатег в секцию <head> HTML-документа:

<!-- Метатег в HTML для мгновенного информирования браузера о поддержке темной темы -->
<meta name="color-scheme" content="light dark">

Как запретить браузеру вмешиваться через color-scheme: light only

А что делать, если фирменный стиль твоего продукта категорически несовместим с темным фоном (например, интернет-магазин ювелирных изделий, концептуальное арт-портфолио или юридический документ с гербовой бумагой)?

Специально для авторов, настаивающих на неприкосновенности визуальной концепции, Safari 27.3 поддержал директиву light only:

/* Явный запрет браузерной инверсии: отображать ТОЛЬКО в светлом оформлении */
:root {
  color-scheme: light only;
}

Встретив такую декларацию, движок WebKit полностью отключает эвристики Adaptive Dark Mode и оставляет страницу в оригинальном авторском виде.

Защита от фингерпринтинга и выводы для верстки

Отдельного уважения заслуживает внимание Apple к цифровой приватности: скрипты аналитики и сторонние трекеры не могут отследить, включен ли у пользователя адаптивный режим. Вызов window.getComputedStyle(element).backgroundColor из JavaScript всегда возвращает оригинальные авторские цвета CSS, а не инвертированные браузером значения. Рендеринг элементов Canvas также происходит в оригинальной цветовой модели.

Главный практический вывод для веб-разработчиков: эра игнорирования темного режима подошла к концу. Если твой сайт не хочет полагаться на эвристики браузерных алгоритмов, объяви color-scheme: light dark, избавься от непрозрачных белых квадратов вокруг растровых логотипов и используй нативные функции light-dark() и currentColor. Это обеспечит безупречный визуальный опыт для тех сорока процентов пользователей, которые берегут свои глаза по ночам.