У бета-версії 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

Про автора

Росіо Гіль

початківчиня вебдизайнерка

Допомагаю невеликим проєктам створювати перші сторінки й портфоліо. Мені подобається знаходити спокійну візуальну систему навіть тоді, коли замовник приніс п’ять референсів із різних епох.

Усі публікації автора