Вспомни ощущение: вечер, приглушенный свет в комнате, на ноутбуке или смартфоне включена системная темная тема. Ты открываешь очередную ссылку из поиска — и комната озаряется ослепительно белым светом фона #ffffff. Глаза режет, а рука инстинктивно тянется закрыть вкладку. В сообществе веб-разработчиков этот эффект давно прозвали «световой гранатой» (flashbang).
Статистика ChromeStatus показывает поразительный разрыв: почти 40% всех просмотров веб-страниц в мире совершаются пользователями с активной системной темной темой. При этом лишь около 10% сайтов реально внедрили темное оформление через медиазапрос prefers-color-scheme.
До сих пор пользователи спасались браузерными расширениями вроде Dark Reader или принудительным флагом Force Dark в Chromium. Но эти инструменты работали как топор: применяли фильтр invert(100%) hue-rotate(180deg), превращая фотографии людей в пугающие рентгеновские снимки, искажая фирменные цвета кнопок и ломая верстку с холстами Canvas.
В бета-версии Safari 27.3 инженеры Apple представили принципиально иное решение. Давай разберем Adaptive Dark Mode в блоге WebKit и выясним, как математическая цветовая матрица превращает светлый сайт в аккуратный темный интерфейс без потери читаемости.
Проблема «световой гранаты»: почему 90% веба слепит глаза в темноте
Почему авторы сайтов не делают темную тему сами? Потому что качественная темная тема — это дорого. Недостаточно просто инвертировать белый цвет на черный #000000:
- Черный фон с белым текстом создает эффект ореола (гало) и напрягает зрение из-за чрезмерной контрастности;
- Требуется перерисовать сотни иконок и логотипов;
- Необходимо заново подобрать цветовую палитру теней и состояний наведения;
- Дизайн-система удваивается в объемах, требуя постоянного тестирования.
Грубая автоматическая инверсия старых алгоритмов делала только хуже: фирменный синий цвет бренда превращался в грязно-оранжевый, а кнопки с полупрозрачными градиентами становились нечитаемыми серыми плашками.
Команда WebKit подошла к задаче не как к наложению CSS-фильтра, а как к математической задаче разделения световых координат прямо в конвейере рендеринга движка.
Математика матрицы WebKit: инверсия яркости без смещения цветового тона
Ключевой прорыв Adaptive Dark Mode — переход в колориметрические пространства Oklab и Display P3 с разделением цвета на две независимые компоненты:
- Яркость (Luminosity / Lightness) — насколько цвет светлый или темный;
- Хроматичность и тон (Chroma & Hue) — собственно цветовой оттенок и его насыщенность.
Когда WebKit встречает светлый элемент верстки, он не инвертирует весь цветовой вектор. Специальная цветовая матрица трансформирует исключительно координату яркости:
- Яркий белый фон
#ffffffплавно пересчитывается в глубокий благородный темно-серый оттенок#1a1a1aили#121212; - Цветной акцент (например, фирменный изумрудный, синий или пурпурный цвет кнопки) сохраняет свой точный угол цветового тона (Hue). Кнопка остается узнаваемой и сохраняет брендовую идентичность;
- Текст динамически подстраивается под фон с обязательным соблюдением стандарта доступности WCAG 2.2 AA: коэффициент контрастности строго удерживается на уровне не менее 4.5:1 для основного текста и 3:1 для крупных заголовков.
Там, где сторонние расширения выдавали блеклую кашу, движок WebKit строит контрастный и аккуратный интерфейс, неотличимый от работы профессионального дизайнера.
Умная фильтрация медиа: SVG, Canvas и гистограммы логотипов
Самая сложная часть адаптации — не текст, а графика. Инженеры WebKit внедрили многоуровневый фильтр селекции медиаэлементов:
- Фотографии и видеофайлы (
<img>,<picture>,<video>): полностью исключаются из матрицы преобразования. Лица людей, пейзажи и видеоролики отображаются в исходных естественных цветах. - Элементы
<canvas>и WebGL: движок не трогает холсты, понимая, что в них часто работают интерактивные графики, карты или браузерные игры. - Векторная графика (SVG): алгоритм анализирует геометрию контуров. Если векторная иконка залита монохромным черным цветом, движок инвертирует ее в белый, чтобы она не потерялась на потемневшем фоне. Если же иконка разноцветная — цвета сохраняются.
- Растровые логотипы (PNG/JPEG): для картинок небольшого размера WebKit рассчитывает гистограмму распределения пикселей. Если картинка представляет собой монохромный логотип на прозрачном фоне, он аккуратно адаптируется. Если же это цветная иллюстрация — она остается нетронутой.
- Сложные эффекты наложения (
mix-blend-mode): в местах, где инверсия фона могла бы вызвать артефакты вычитания цвета, движок деликатно отключает режим наложения.
Отдельного внимания заслуживает защита от цифрового отпечатка (Anti-Fingerprinting). Если бы сайты могли через вызов JavaScript window.getComputedStyle() узнать, что страница отображается в адаптивном темном режиме, этот параметр немедленно использовали бы трекеры. WebKit изолировал эти данные: скрипты всегда видят оригинальные авторские стили из CSS-файла.
Контроль на стороне разработчика: как поддержать или отключить режим
Браузерная адаптация — это страховочная сетка, а не замена авторскому дизайну. Команда WebKit оставила разработчикам полный контроль над процессом.
Если ты уже внедряешь динамические темы на чистом CSS, достаточно явно заявить о поддержке темного режима в теге <head>:
<!-- Декларация нативной поддержки темной темы -->
<meta name="color-scheme" content="light dark">
Либо в стилях корневого элемента:
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #f0f0f0;
}
}
Как только WebKit видит color-scheme: light dark, Adaptive Dark Mode мгновенно отключается, полностью передавая управление версткой автору сайта.
Если же твой проект принципиально не может быть темным (например, онлайн-редактор фотографий, сервис печати документов или строгий медицинский справочник), автоматическую адаптацию можно явно запретить (Opt-Out):
<!-- Запрет адаптации для всего документа -->
<meta name="color-scheme" content="light only">
Или локально для конкретного виджета в CSS:
.photo-canvas-preview {
color-scheme: light only;
}
Adaptive Dark Mode в Safari 27.3 задает новый стандарт взаимодействия браузера с контентом: уважение к зрению пользователя больше не требует костылей и расширений, а веб становится комфортным в любое время суток.