Автоматическая тёмная тема

André Cipriani Bandarra

В Chrome 96 на Android появилась экспериментальная функция автоматического включения тёмной темы. Если пользователь выбрал тёмную тему в операционной системе, браузер автоматически применяет её к сайтам со светлой темой. Пользователи могут отключить тёмную тему на уровне ОС или в настройках Chrome.

Как зарегистрироваться для участия в эксперименте с источником

Вы также можете включить алгоритм затемнения для пользователей в рамках эксперимента с источником. Это позволит вам оценить, как автоматическая тёмная тема влияет на ваши KPI.

Ознакомьтесь с документацией, чтобы узнать, как настроить эксперимент с источником, а затем зарегистрируйтесь в эксперименте с источником AutoDarkMode, чтобы получить токен.

Как протестировать автоматическую тёмную тему на устройстве

В инструментах разработчика

Чтобы включить автоматическую тёмную тему в Инструментах разработчика, выполните следующие действия:

  1. Нажмите на значок меню в виде трех точек.
  2. Выберите More Tools (Дополнительные инструменты), а затем – Rendering (Рендеринг).
  3. В разделе Emulate auto dark mode (Эмулировать автоматическую тёмную тему) выберите Enable (Включить).

На телефоне Android

Чтобы протестировать автоматическую тёмную тему на телефоне Android:

  1. Перейдите на страницу chrome://flags и включите эксперимент #darken-websites-checkbox-in-theme-setting.
  2. Затем нажмите на значок меню в виде трех точек, выберите Настройки, а затем – Тема и установите флажок По возможности использовать тёмную тему для сайтов.

Теперь светлые страницы будут затемняться на телефоне.

Настройка отдельных элементов

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

В этом эксперименте с источником такие настройки возможны с помощью JavaScript, который определяет, включена ли у пользователя автоматическая тёмная тема, а затем настраивает нужные элементы.

Обнаружение автоматической тёмной темы

Чтобы определить, включена ли у пользователя автоматическая тёмная тема, создайте элемент, у которого свойство background-color имеет значение canvas, а цветовая схема – светлая. Если вычисленный цвет фона отличается от белого (rgb(255, 255, 255)), то к странице применяется автоматическая тёмная тема.

<div id="detection"
     style="display: none; background-color: canvas; color>-<sche>me: light"
/div

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

Настройка большого количества элементов

Описанное выше решение может быть трудно масштабировать, если вам нужно настроить большое количество элементов. В качестве альтернативы можно использовать автоматическое определение тёмной темы, чтобы добавить класс маркера в тело страницы:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

Затем настройте элементы с помощью CSS:

.auto-dark-theme > #my-element {
  border-color: red;
}

API для настройки отдельных элементов пока находится на раннем этапе разработки. Мы работаем с командами по стандартизации, чтобы предоставить разработчикам более выразительный API для отказа. Вы можете следить за обсуждением этой проблемы на GitHub.

Как отключить автоматическую тёмную тему

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

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

С помощью метатега

Первый способ отключить автоматическую тёмную тему – добавить в заголовок страницы следующий метатег: Преимущество метатега заключается в том, что он полностью предотвращает применение автоматической тёмной темы, которое может вызвать "вспышку затемненного контента".

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Отключение отдельных элементов

Второй способ – задать для свойства CSS color-scheme значение only light. Хотя отключение на уровне элементов можно использовать для отключения автоматической тёмной темы на всей странице, преимущество этого подхода заключается в том, что он позволяет отключать ее только для определенных частей страницы:

#my-element {
  color-scheme: only light;
}

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

:root {
  color-scheme: only light;
}

Сообщите нам о ней!

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

Вы можете отправить нам отзыв разными способами:

Автор фото: Феликс Бесомб (Félix Besombes).