Safari автоматически затемняет сайты, которые его не просили, и ваша страница не может об этом узнать

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

Они не ошибаются, и вы тоже не ошибаетесь. С 3 ноября 2026 года в этом разговоре участвует третья сторона, и самое важное - это не то, что она меняет ваши цвета. Важнее то, что ваша страница намеренно лишена возможности узнать об этом.

Что такое Adaptive Dark Mode

Adaptive Dark Mode появился в Safari 27.3 beta. Описание WebKit состоит из одного предложения: “Когда пользователь включает эту функцию, Safari адаптирует светлые сайты и представляет их в темном виде.”

Причина, которую они приводят, заключается в разрыве между двумя числами, и стоит их процитировать, так как они объясняют, почему это было неизбежно: “Почти 40% загрузок веб-страниц происходит от пользователей в темном режиме, однако только 10% загрузок страниц его поддерживают.”

Это опция, выбираемая пользователем, а не вами. Когда кто-то просматривает сайт с темным оформлением системы и попадает на светлую страницу, Safari предлагает превью, и они нажимают “Попробовать”. С этого момента светлые страницы для них отображаются в темном виде. На странице нет баннера, и в вашей аналитике нет никаких данных о том, что это произошло.

Как система решает, менять ли вашу страницу

Есть два пути, и только один из них вас касается.

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

Для всего остального система анализирует. Она изучает страницу, оценивает, светлая она или темная, и не трогает темные страницы. Страница со светлым оформлением преобразуется.

Само преобразование - это матрица цветов, которая инвертирует яркость при сохранении оттенка, так что белый фон становится темным, а темный текст становится светлым, без того чтобы все превратилось в фотографический негатив. Для текста система ориентируется на коэффициент контрастности WCAG 4.5:1.

Часть, которая создает ошибки, это то, что преобразуется не всё

Полная инверсия легко поддаётся анализу. Это не так, и исключения - это то, откуда приходят отчеты об ошибках.

• Светлые градиенты CSS преобразуются, поэтому градиент, который вы тщательно подстраивали, пересчитывается.
• SVG-изображения проверяются, и их цвета преобразуются при необходимости. Растровые изображения в основном оставляются без изменений, но их гистограммы пикселей анализируются, и простые черно-белые логотипы инвертируются.
• Маски и mix-blend-mode могут быть отключены. Рассуждение WebKit заключается в том, что эти эффекты дают нежелательные результаты на элементе, цвета которого были преобразованы, поэтому в некоторых случаях Adaptive Dark Mode отключает их вместо преобразования.
• <canvas> остается полностью неизменным, потому что содержимое canvas, по их словам, “сложно предсказать”.

Прочитайте последние два пункта вместе, и вы получите ошибку, которую никто не написал. График, отрисованный в canvas, сохраняет свой белый фон, в то время как каждый пиксель вокруг него становится темным. Составной слой перестает компоноваться. Оба эффекта невидимы для вас и очевидны для того, кто смотрит на экран.

Ваша страница не может узнать об этом

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

Позиция Apple заключается в том, что обнаруживаемый параметр - это поверхность для отпечатков пальцев браузера, поэтому:

Safari запрещает веб-сайтам определять, когда был применен Adaptive Dark Mode. JavaScript, который запрашивает цвета CSS, получит исходные авторские цвета, а не преобразованные.

Это абсолютно, и очевидный обходной путь закрыт в той же части: “Любые изображения, отрисованные в canvas, отображаются в исходной форме.” Скриншот вашей собственной страницы в canvas возвращает версию, которую вы написали, а не версию, которая отображается.

Таким образом, getComputedStyle возвращает вам ваши собственные значения. Диагностическая точка доступа, которая отправляет вычисленные цвета, отправляет вашу таблицу стилей. Запрос к отправившему отчет об ошибке “вставьте ваши вычисленные стили” возвращает то же самое. Каждый инструмент, который у вас есть, находится на неправильной стороне преобразования, и это знакомая схема: страница не видит саму себя, и единственным свидетелем является человек, смотрящий на экран.

Отказ от функции и текущее ограничение

Два объявления, делающие противоположные вещи.

color-scheme: light dark говорит, что вы поддерживаете темный режим и будете его обрабатывать. Adaptive Dark Mode затем оставляет вас в покое. Это то, к чему нужно обратиться, если у вас уже есть или вы планируете создать настоящую темную тему, и совет WebKit состоит в том, чтобы объявить это в заголовке HTML, а не внедрять его позже с помощью JavaScript, чтобы страница отображалась правильно как можно раньше.

color-scheme: light only или <meta name="color-scheme" content="light only"> говорит, что страница должна отображаться только в светлом режиме и отказывает преобразование.

Об ограничении стоит узнать перед тем, как выпустить его в качестве исправления: WebKit отмечает, что ключевое слово only “не поддерживается в Safari 27.3 beta 1”. Это бета, функция явно описана как развивающаяся на протяжении этой бета-версии, и задокументированный выход из ситуации еще не работает в первой версии.

Что спросить у человека, который сообщил об ошибке

Обычный вопрос “какой браузер и версия” вас не туда приведет. Кто-то, кто нажал “Попробовать” несколько недель назад, не думает об этом как о параметре, который он изменил, так же как они не сообщали бы о яркости экрана.

Два вопроса работают. Выглядит ли это неправильно в приватном окне? и выглядит ли это неправильно на другом устройстве? Оба меняют ответ, если Adaptive Dark Mode задействован, и ни один не требует от отправившего отчет об ошибке знания о том, что это такое.

Еще лучше - это картинка. Разрыв между тем, что описывает ваш код, и тем, что показывает экран, - это именно разрыв, который закрывает скриншот, и в этом случае это единственное, что может помочь, потому что сама страница была помещена на неправильную сторону вопроса.

Это второй раз за год, когда релиз Safari изменил, что означает отчет об ошибке, а не что может делать страница, после изменений отчетности в Safari 27.

Что из этого следует

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

Если у вас есть темная тема, объявите ее, и это к вам не применяется. Если нет, реалистичный выбор - позволить этому произойти и проверить, что ваши canvas и режимы смешивания пережили это, или объявить light only и ждать бета-версии, которая это поддерживает. То, что недоступно - это узнать изнутри страницы, что означает следующий отчет об “ошибке цветов” - это то, что вам следует принять.

Объявление WebKit с примерами и полным списком того, что преобразуется и что нет, находится в статье Introducing Adaptive Dark Mode.