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

Андре Сиприани Бандарра

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

Зарегистрируйтесь для участия в пробной версии Origin

Вы также можете включить алгоритм затемнения для своих пользователей через пробную версию Origin. Это позволит вам проверить, как Auto Dark Theme работает с вашими KPI.

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

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

С DevTools

Чтобы включить автоматическую темную тему в DevTools:

  1. Нажмите на меню с тремя точками.
  2. Выберите Дополнительные инструменты , затем Рендеринг .
  3. Выберите Включить для параметра Эмулировать автоматический темный режим .

На телефоне Android

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

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

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

Настройка каждого элемента

Несмотря на то, что мы стремимся к тому, чтобы Auto Dark Theme давала хорошие результаты во всех случаях, первые разговоры с разработчиками показали, что они хотели бы настроить определенные элементы, чтобы лучше адаптировать их к желаемому внешнему виду и ощущениям.

В этом исходном тестовом варианте такие настройки возможны с помощью JavaScript для определения того, находится ли пользователь в режиме Auto Dark Theme, а затем настройки желаемых элементов.

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

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

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: 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 .

Как отказаться от автоматической темной темы

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

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

Использование метатега

Первая альтернатива для отказа от Auto Dark Theme — это добавление следующего метатега в заголовок вашей страницы. Преимущество использования метатега в том, что он предотвращает применение Auto Dark Theme вообще, что может вызвать «вспышку затемненного контента».

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

Отказ от участия по каждому элементу

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

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

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

:root {
  color-scheme: only light;
}

Отправьте нам отзыв!

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

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

Фото Феликса Бесомба .