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

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

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

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

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

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

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

С помощью инструментов разработчика

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

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

На телефоне Android

Чтобы протестировать Auto Dark Theme на своем телефоне Android:

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

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

Индивидуальная настройка для каждого элемента

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

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

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

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

<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, неудовлетворителен, можно отказаться от этой функции.

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

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

<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;
}

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

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

Есть много каналов, по которым вы можете отправить нам свой отзыв:

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