В бета-версии Safari 27.3 появился Adaptive Dark Mode для светлых сайтов

WebKit представила Adaptive Dark Mode в бета-версии Safari 27.3. Как пишет WebKit Blog в публикации от 3 ноября 2026 года, функция по выбору пользователя адаптирует светлые сайты для просмотра в тёмном режиме. Если сайт уже объявил поддержку тёмной темы, браузер не меняет его оформление.

По данным WebKit, почти 40% загрузок страниц приходится на пользователей с тёмным режимом, но лишь 10% загрузок — на страницы, которые его поддерживают. Функция призвана сократить этот разрыв: сделать просмотр более последовательным, даже если у сайта нет собственной тёмной темы.

Как браузер меняет страницу

Попробовать функцию можно в Safari 27.3 beta: нужно включить тёмное оформление системы и открыть сайт со светлым фоном. Safari предложит предварительный просмотр Adaptive Dark Mode; для включения нужно нажать «Try».

Сначала браузер проверяет, объявил ли сайт поддержку обеих тем через <meta name="color-scheme" content="light dark"> или CSS-свойство color-scheme: light dark. Такие страницы он не меняет. В остальных случаях Safari оценивает преобладающие цвета: страницу с тёмным фоном и светлым текстом оставляет как есть, а светлую адаптирует.

WebKit использует преобразование, которое меняет светлоту, сохраняя цветовой тон: светлый фон становится тёмным, а тёмный текст — светлым. Светлые CSS-градиенты тоже преобразуются. Для текста система стремится обеспечить контраст 4,5:1 по WCAG. Браузер также следит за читаемостью текста на изображениях, заметностью кнопок и видимостью меню.

Большинство изображений остаётся без изменений. Но если значок или логотип теряет контраст на новом фоне, Safari может скорректировать цвета SVG. Для растровых изображений браузер анализирует распределение цветов и может инвертировать простой чёрно-белый логотип. Содержимое <canvas> не меняется. Иногда браузер отключает маски или mix-blend-mode, если после изменения цветов эффект выглядит нежелательно.

Сайт не может определить, применил ли пользователь Adaptive Dark Mode. JavaScript при запросе CSS-цветов получает значения, заданные автором страницы, а изображения, нарисованные в canvas, сохраняют исходный вид. WebKit объясняет это защитой от отслеживания: обнаружение функции дало бы сайтам дополнительный признак для распознавания пользователя.

Что проверить на своём сайте

Владельцам сайтов и командам стоит открыть ключевые страницы в бета-версии Safari с включённой функцией. Я бы начала с мест, где цвет несёт смысл или помогает действовать: кнопок, состояний элементов, логотипов, меню и текста поверх изображений. Автоматическая адаптация учитывает эти случаи, но не заменяет проверку интерфейса.

Для страниц со старыми приёмами оформления WebKit предлагает заменить растровые иконки и логотипы на SVG, фоновые изображения-плитки — на CSS-цвета или градиенты, а спрайты для скруглений, теней и состояний кнопок — на средства CSS. Контентные изображения лучше готовить с прозрачным фоном, не встраивая в них цвет страницы. Отступы внутри контейнеров помогут избежать тесноты.

Если нужен предсказуемый результат, можно сделать собственную тёмную тему. Для этого доступны prefers-color-scheme, light-dark(), CSS-переменные и изображения, выбираемые через <picture> по предпочтению темы. Поддержку обеих тем WebKit советует объявлять в HTML через color-scheme или в CSS на :root либо body, не откладывая это до выполнения JavaScript. Для отдельного участка страницы можно задать color-scheme: light dark и свои тёмные стили.

Сообщить браузеру, что нужен только светлый вариант, можно через color-scheme: light only для страницы или отдельных элементов. Но в Safari 27.3 beta 1 этот способ пока не работает: ключевое слово only не поддерживается.

Моё мнение: автоматическая тема — не готовый дизайн

Мне нравится, что Safari пытается убрать резкий переход между тёмным интерфейсом и светлым сайтом, не требуя немедленной переделки каждой страницы. Для небольшого проекта это может сделать первый просмотр комфортнее. Но я бы не принимала автоматическое преобразование за решение всех задач: если цвет выделяет важное действие или различает состояния, его смысл нужно проверить глазами, а не только по значениям в CSS.

Я бы использовала эту бету как повод спокойно пройтись по визуальной системе сайта. Сначала убедиться, что страницы остаются понятными после адаптации, затем решить, где достаточно работы браузера, а где нужна своя тёмная тема. И полезно обсудить это вместе с разработчиком: понимание того, как объявляется color-scheme и устроены стили, помогает превратить замечания к макету в конкретные правки.

Источники

Откуда новость. Текст — пересказ своими словами, факты — из источника, мнение — автора.

1. Introducing Adaptive Dark Mode webkit.org

Об авторе

Росио Гил

начинающий веб-дизайнер

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

Все публикации автора