Adaptive Dark Mode в Safari 27.3: браузер затемняет светлые сайты без участия разработчика

В Safari 27.3 beta появился Adaptive Dark Mode: если у пользователя включена тёмная тема, а сайт светлый и своей тёмной версии не объявляет, браузер сам перекрасит страницу — фон станет тёмным, текст светлым. Сайты, которые указали color-scheme: light dark, функция не трогает. Проверить дизайн и решить, кто управляет тёмной темой — вы или Safari, — стоит до релиза в декабре.

Apple представила функцию 3 ноября 2026 года вместе с первыми бетами iOS 27.3, iPadOS 27.3 и macOS 27.3; подробный разбор опубликовала команда WebKit. Причина — разрыв между спросом и предложением: по оценке WebKit, около 40% веб-трафика приходится на пользователей тёмного режима, а нативно его поддерживают лишь около 10% сайтов. Для бизнеса это вопрос UI/UX-дизайна: если не задать тёмную тему самому, её «нарисует» браузер.

Автоматика не знает брендбука: логотип, фирменные цвета, баннеры и схемы могут выглядеть иначе, чем задумано. Поэтому для команд, которые ведут разработку сайтов, это повод проверить вёрстку в Safari 27.3 beta и сознательно выбрать стратегию. Ниже — как работает Adaptive Dark Mode, где он ошибается и какие строки кода решают вопрос.

Как Safari решает, какую страницу затемнять

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

Что перекрашивается, а что остаётся как есть

В основе — цветовая матрица, которая инвертирует яркость цвета, сохраняя оттенок: синяя кнопка остаётся синей, но меняет светлоту. Для текста Safari добивается контраста не ниже 4,5:1 — порога WCAG для основного текста.

• Перекрашиваются: светлые фоны, тёмный текст, CSS-градиенты, SVG-графика (после анализа цветов), простые чёрно-белые растровые логотипы (по гистограмме).
• Не меняются: большинство фотографий и растровых изображений, а также содержимое <canvas> — его слишком трудно предсказать.
• Могут отключаться: маски и mix-blend-mode, чтобы не получить непредсказуемый результат. Если на этих эффектах держится дизайн, страница в Adaptive Dark Mode будет выглядеть иначе.

Отдельный момент — приватность. JavaScript, читающий CSS-цвета, получает исходные значения, а не перекрашенные; <canvas> тоже отдаёт оригинал. Медиазапрос prefers-color-scheme сообщает только системную настройку пользователя. Иначе говоря, сайт не может узнать, что Safari его затемнил, — и аналитика или скрипты не помогут поймать такие визиты.

Как сохранить свой дизайн: три сценария

1. Своя тёмная тема. Если она уже есть или вы её делаете, объявите поддержку обоих режимов прямо в HTML: <meta name="color-scheme" content="light dark"> или в CSS :root { color-scheme: light dark }. Тогда Safari ничего не меняет. WebKit советует не добавлять эту информацию позже через JavaScript — браузер должен получить её сразу.
2. Сайт должен оставаться светлым. Укажите color-scheme: light only (или content="light only" в meta). Важная оговорка: в первой бете поддержка ключевого слова only ограничена, Apple обещает доработать её по ходу бета-цикла.
3. Гибрид. color-scheme: light dark можно задать не всему сайту, а отдельным элементам — например, виджету, у которого уже есть своя тёмная версия, оставив остальное на Adaptive Dark Mode.

Что проверить в вёрстке до декабря

Если вы решили доверить затемнение Safari, WebKit даёт список практик, при которых результат выглядит аккуратно:

• заменить растровые логотипы и иконки на SVG — векторная графика перекрашивается корректно;
• использовать CSS-цвета и градиенты вместо фоновых картинок-плиток;
• обновить старые CSS-спрайты, где скругления и тени «запечены» в картинку;
• делать прозрачный фон у контентных изображений и добавлять внутренние отступы контейнерам;
• строить палитру на CSS-переменных и современных функциях light-dark(), color-mix(), contrast-color() — это заодно упрощает собственную тёмную тему.

Отдельно стоит пройтись по местам, где цвет несёт смысл: графики на canvas, статусы «ошибка/успех», цвета брендов-партнёров, промо-баннеры с текстом в картинке. Подробнее о том, как проектировать две темы с самого начала, мы писали в материале о реализации тёмной темы.

Когда функция дойдёт до пользователей

Сейчас Adaptive Dark Mode доступен только в бете Safari 27.3 для разработчиков. Публичный релиз iOS 27.3 и macOS 27.3 ожидается в начале декабря 2026 года. В том же обновлении Safari получает вертикальные вкладки — панель слева, которая работает с группами вкладок. Финальный список устройств и поведение функции в релизе WebKit пока не уточняет, поэтому тестировать стоит на текущих бетах и перепроверить после выхода.

Часто задаваемые вопросы

Затронет ли Adaptive Dark Mode мой сайт? Да, если сайт светлый, у пользователя включён тёмный режим и в коде нет объявления color-scheme с поддержкой тёмной темы. Тёмные сайты и сайты со своей тёмной темой функция не трогает.

Как полностью отказаться от автоматического затемнения? Объявить свою поддержку обоих режимов (color-scheme: light dark) либо зафиксировать светлый вид через color-scheme: light only. Второй вариант в первой бете поддерживается не полностью.

Можно ли понять, что посетитель видит затемнённую версию? Нет. Safari намеренно скрывает это от скриптов: CSS-цвета и canvas возвращают исходные значения, а prefers-color-scheme показывает лишь системную настройку.

Это работает на основе ИИ? По описанию WebKit, в основе — анализ цветов страницы и цветовая матрица, инвертирующая яркость с сохранением оттенка, а не генеративная модель.

Источники

• WebKit — Introducing Adaptive Dark Mode, 3 ноября 2026 (первоисточник).
• MacStories — Introducing Adaptive Dark Mode, ноябрь 2026.
• AppleInsider — Apple brings 3 big new features to Safari on iPhone, iPad & Mac in initial 27.3 beta, 3 ноября 2026.
• Daring Fireball — Safari 27.3 Beta Adds Vertical Tabs and Adaptive Dark Mode, 3 ноября 2026.