В Chrome 96 представлена пробная версия Auto Dark Themes для Android. Благодаря этой функции браузер применяет автоматически созданную темную тему к сайтам со светлой тематикой, когда пользователь выбрал темные темы в операционной системе. Пользователи могут отказаться от темных тем, отключив эту опцию на уровне ОС или в определенной настройке Chrome.
Зарегистрируйтесь для пробной версии Origin
Вы также можете включить алгоритм затемнения для своих пользователей с помощью пробной версии Origin. Это позволяет вам проверить, как Auto Dark Theme работает с вашими ключевыми показателями эффективности.
Перейдите к документации, чтобы узнать , как настроить пробную версию Origin , а затем зарегистрируйтесь в пробной версии AutoDarkMode Origin, чтобы получить токен.
Проверьте автоматическую темную тему на своем устройстве
С помощью инструментов разработчика
Чтобы включить автоматическую темную тему в DevTools:
- Нажмите меню из трех точек.
- Выберите «Дополнительные инструменты» , затем «Рендеринг» .
- Выберите «Включить» для параметра «Имитировать автоматический темный режим» .
На телефоне Android
Чтобы протестировать Auto Dark Theme на своем телефоне Android:
- Перейдите к
chrome://flags
и включите эксперимент#darken-websites-checkbox-in-theme-setting
. - Затем коснитесь меню из трех точек, выберите «Настройки» , затем «Тема» и установите флажок « Применять темные темы к сайтам, если это возможно» .
Теперь светлые страницы на телефоне будут затемнены.
Индивидуальная настройка для каждого элемента
Несмотря на то, что мы стремимся к тому, чтобы 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-интерфейсов разработчика для настройки элементов и отказа от них.
Есть много каналов, по которым вы можете отправить нам свой отзыв:
- Через опрос разработчиков .
- Сообщение об ошибке в проекте Chromium .
- Через форму обратной связи с пробной версией Origin .
Фото Феликса Бесомба .