Переоценка или необходимость? Узнайте все о темном режиме и о том, как его поддерживать на благо ваших пользователей!
Введение
Темный режим перед темным режимом
![Монитор компьютера с зеленым экраном](https://web.dev/static/articles/prefers-color-scheme/image/green-screen-computer-mon-01027d880d7ee.jpg?authuser=5&hl=ru)
Мы прошли полный круг с темным режимом. На заре персональных компьютеров темный режим был не вопросом выбора, а фактом: монохромные компьютерные ЭЛТ- мониторы работали, направляя электронные лучи на фосфоресцирующий экран, а люминофор, используемый в ранних ЭЛТ, был зеленым. Поскольку текст отображался зеленым цветом, а остальная часть экрана была черной, эти модели часто называли зелеными экранами .
![Обработка текста «темно-белое»](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-word-processi-c815d99e74013.jpg?authuser=5&hl=ru)
Представленные впоследствии цветные ЭЛТ отображали несколько цветов за счет использования красного, зеленого и синего люминофора. Они создали белый цвет, одновременно активировав все три люминофора. С появлением более сложных настольных издательских систем WYSIWYG идея сделать виртуальный документ похожим на физический лист бумаги стала популярной.
![Темно-белая веб-страница в браузере WorldWideWeb](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-webpage-the-b32b5ae575bbe.png?authuser=5&hl=ru)
Именно здесь зародилась тенденция в дизайне «темное на белом» , и эта тенденция была перенесена в раннюю версию Интернета, основанного на документах . Самый первый браузер WorldWideWeb (помните, CSS еще даже не был изобретен ) отображал веб-страницы таким образом. Забавный факт: второй браузер Line Mode Browser — браузер на базе терминала — имел зеленый цвет на темном фоне. В наши дни веб-страницы и веб-приложения обычно разрабатываются с темным текстом на светлом фоне — базовое предположение, которое также жестко запрограммировано в таблицах стилей пользовательских агентов, включая файлы .
![Использование смартфона, лежа в постели](https://web.dev/static/articles/prefers-color-scheme/image/smartphone-used-while-lyi-d0cbc01823ee4.jpg?authuser=5&hl=ru)
Времена ЭЛТ давно прошли. Потребление и создание контента перешло на мобильные устройства, использующие ЖК-экраны с подсветкой или энергосберегающие AMOLED- экраны. Меньшие по размеру и более мобильные компьютеры, планшеты и смартфоны привели к появлению новых моделей использования. Задачи в свободное время, такие как просмотр веб-страниц, программирование для развлечения и высококачественные игры, часто выполняются в нерабочее время в затемненных помещениях. Люди даже наслаждаются своими устройствами, лежа в постели по ночам. Чем больше людей используют свои устройства в темноте, тем популярнее становится идея вернуться к истокам принципа «свет в темноте» .
Почему темный режим
Темный режим по эстетическим соображениям
Когда людей спрашивают , почему им нравится или нужен темный режим , самый популярный ответ — «это приятнее для глаз», а затем «это элегантно и красиво». Apple в своей документации для разработчиков Dark Mode прямо пишет: «Выбор включения светлого или темного внешнего вида является эстетическим для большинства пользователей и может не зависеть от условий окружающего освещения».
![CloseView в Mac OS System 7 с](https://web.dev/static/articles/prefers-color-scheme/image/closeview-mac-os-system-d5554c867b6af.png?authuser=5&hl=ru)
Темный режим как инструмент доступности
Есть также люди, которым действительно нужен темный режим и которые используют его как еще один инструмент доступности, например, пользователи с плохим зрением. Самый ранний экземпляр такого инструмента специальных возможностей, который я смог найти, — это функция CloseView в System 7 , которая имела переключатель «Черное на белом» и «Белое на черном» . Хотя System 7 поддерживала цвет, пользовательский интерфейс по умолчанию по-прежнему оставался черно-белым.
Эти реализации, основанные на инверсии, продемонстрировали свои слабые стороны после появления цвета. Исследование пользователей, проведенное Szpiro et al. о том, как люди со слабым зрением получают доступ к компьютерным устройствам и показали, что всем опрошенным пользователям не нравятся перевернутые изображения, но многие предпочитают светлый текст на темном фоне. Apple учитывает это предпочтение пользователя с помощью функции Smart Invert , которая меняет цвета на дисплее, за исключением изображений, мультимедиа и некоторых приложений, использующих темные цветовые стили.
Особой формой плохого зрения является синдром компьютерного зрения, также известный как цифровое напряжение глаз, который определяется как «сочетание проблем со зрением и глазами, связанных с использованием компьютеров (включая настольные компьютеры, ноутбуки и планшеты) и других электронных дисплеев ( например, смартфоны и электронные устройства для чтения)». Было высказано предположение , что использование электронных устройств подростками, особенно в ночное время, приводит к повышенному риску сокращения продолжительности сна, увеличения латентного периода засыпания и увеличения дефицита сна. Кроме того, согласно исследованиям Розенфилда , широко известно , что воздействие синего света участвует в регуляции циркадного ритма и цикла сна, а нерегулярное освещение может привести к лишению сна, что может повлиять на настроение и выполнение задач. Чтобы ограничить эти негативные эффекты, может помочь уменьшение синего света путем регулировки цветовой температуры дисплея с помощью таких функций, как Night Shift в iOS или Night Light в Android, а также избегание яркого света или неравномерного освещения в целом с помощью темных тем или темных режимов.
Экономия энергии в темном режиме на экранах AMOLED
Наконец, известно, что темный режим экономит много энергии на экранах AMOLED . Тематические исследования Android, посвященные популярным приложениям Google, таким как YouTube, показали, что экономия энергии может достигать 60%. В видеоролике ниже представлена более подробная информация об этих тематических исследованиях и экономии энергии для каждого приложения.
Активация темного режима в операционной системе
Теперь, когда я рассказал, почему темный режим так важен для многих пользователей, давайте рассмотрим, как вы можете его поддерживать.
![Настройки темного режима Android Q](https://web.dev/static/articles/prefers-color-scheme/image/android-q-dark-mode-setti-43e0e230e78da.png?authuser=5&hl=ru)
В операционных системах, поддерживающих темный режим или темную тему, обычно есть возможность активировать его где-то в настройках. В macOS X он находится в разделе «Общие » системных настроек и называется «Внешний вид » ( скриншот ), а в Windows 10 — в разделе «Цвета» и называется «Выберите цвет» ( скриншот ). Для Android Q вы можете найти его в разделе «Отображать как тумблер темной темы» ( скриншот ), а в iOS 13 вы можете изменить « Внешний вид» в разделе «Отображение и яркость» настроек ( скриншот ).
Медиа-запрос prefers-color-scheme
И последний кусочек теории, прежде чем я начну. Медиа-запросы позволяют авторам тестировать и запрашивать значения или функции пользовательского агента или устройства отображения независимо от отображаемого документа. Они используются в правиле CSS @media
для условного применения стилей к документу, а также в различных других контекстах и языках, таких как HTML и JavaScript. Медиа-запросы уровня 5 представляют так называемые медиа-функции пользовательских предпочтений, то есть позволяют сайтам определять предпочтительный способ отображения контента пользователем.
Медиа prefers-color-scheme
используется для определения того, запросил ли пользователь на странице использование светлой или темной цветовой темы. Он работает со следующими значениями:
-
light
: указывает, что пользователь уведомил систему о том, что он предпочитает страницу со светлой темой (темный текст на светлом фоне). -
dark
: указывает, что пользователь уведомил систему о том, что он предпочитает страницу с темной темой (светлый текст на темном фоне).
Поддержка темного режима
Выясняем, поддерживается ли темный режим браузером
Поскольку о темном режиме сообщается посредством медиа-запроса, вы можете легко проверить, поддерживает ли текущий браузер темный режим, проверив, совпадает ли вообще медиа-запрос prefers-color-scheme
. Обратите внимание, что я не включаю никаких значений, а просто проверяю, соответствует ли только медиа-запрос.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
На момент написания prefers-color-scheme
поддерживается как на настольных компьютерах, так и на мобильных устройствах (если доступно) Chrome и Edge, начиная с версии 76, Firefox, начиная с версии 67, и Safari, начиная с версии 12.1 на macOS и начиная с версии 13. на iOS. Для всех остальных браузеров вы можете проверить Могу ли я использовать таблицы поддержки .
Изучение предпочтений пользователя во время запроса
Заголовок подсказки клиента Sec-CH-Prefers-Color-Scheme
позволяет сайтам при необходимости получать предпочтения цветовой схемы пользователя во время запроса, позволяя серверам встраивать правильный CSS и, следовательно, избегать вспышки неправильной цветовой темы.
Тёмный режим на практике
Давайте наконец посмотрим, как поддержка темного режима выглядит на практике. Как и в случае с Highlander , в темном режиме может быть только один : темный или светлый, но никогда оба! Почему я упоминаю об этом? Потому что этот факт должен повлиять на стратегию загрузки. Пожалуйста, не заставляйте пользователей загружать CSS по критическому пути рендеринга, который предназначен для режима, который они в настоящее время не используют. Поэтому, чтобы оптимизировать скорость загрузки, я разделил свой CSS для примера приложения, которое на практике демонстрирует следующие рекомендации, на три части, чтобы отложить некритичный CSS :
-
style.css
, содержащий общие правила, которые повсеместно используются на сайте. -
dark.css
, содержащий только правила, необходимые для темного режима. -
light.css
, который содержит только правила, необходимые для облегченного режима.
Стратегия загрузки
Два последних, light.css
и dark.css
, загружаются условно с помощью запроса <link media>
. Изначально не все браузеры будут поддерживать prefers-color-scheme
(определяемую с помощью приведенного выше шаблона ), с которой я работаю динамически, загружая файл light.css
по умолчанию через условно вставленный элемент <link rel="stylesheet">
в крошечной строке. сценарий (свет — произвольный выбор, я также мог бы сделать темный вариант резервным вариантом по умолчанию). Чтобы избежать вспышек нестилизованного контента , я скрываю содержимое страницы до тех пор, пока не загрузится light.css
.
<script>
// If `prefers-color-scheme` is not supported, fall back to light mode.
// In this case, light.css will be downloaded with `highest` priority.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<!--
Conditionally either load the light or the dark stylesheet. The matching file
will be downloaded with `highest`, the non-matching file with `lowest`
priority. If the browser doesn't support `prefers-color-scheme`, the media
query is unknown and the files are downloaded with `lowest` priority (but
above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
rel="stylesheet"
href="/light.css"
media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />
Архитектура таблицы стилей
Я максимально использую переменные CSS , это позволяет моему общему style.css
быть универсальным, а вся настройка светлого или темного режима происходит в двух других файлах dark.css
и light.css
. Ниже вы можете увидеть отрывок из реальных стилей, но этого должно быть достаточно, чтобы передать общую идею. Я объявляю две переменные, --color
и --background-color
, которые по сути создают базовую тему «темный на светлом» и «светлый на темном» .
/* light.css: 👉 dark-on-light */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
}
/* dark.css: 👉 light-on-dark */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
}
В моем style.css
я затем использую эти переменные в правиле body { … }
. Поскольку они определены в псевдоклассе CSS :root
— селекторе, который в HTML представляет элемент <html>
и идентичен селектору html
, за исключением того, что его специфичность выше — они каскадируются вниз, что служит мне для объявления глобального CSS. переменные.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
В приведенном выше примере кода вы, вероятно, заметили color-scheme
свойства со значением light dark
, разделенным пробелами.
Это сообщает браузеру, какие цветовые темы поддерживает мое приложение, и позволяет ему активировать специальные варианты таблицы стилей пользовательского агента, что полезно, например, для того, чтобы позволить браузеру отображать поля формы с темным фоном и светлым текстом, настраивать полосы прокрутки и или включить цвет выделения с учетом темы. Точные детали color-scheme
указаны в модуле настройки цвета CSS, уровень 1 .
Все остальное — это просто вопрос определения переменных CSS для вещей, которые имеют значение на моем сайте. Семантическая организация стилей очень помогает при работе с темным режимом. Например, вместо --highlight-yellow
рассмотрите возможность вызова переменной --accent-color
, поскольку «жёлтый» на самом деле может не быть жёлтым в тёмном режиме или наоборот. Ниже приведен пример еще нескольких переменных, которые я использую в своем примере.
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}
Полный пример
В следующей вставке Glitch вы можете увидеть полный пример, который применяет концепции, изложенные выше, на практике. Попробуйте переключить темный режим в настройках вашей операционной системы и посмотрите, как отреагирует страница.
Воздействие нагрузки
Поиграв с этим примером, вы поймете, почему я загружаю dark.css
и light.css
с помощью медиа-запросов. Попробуйте переключить темный режим и перезагрузить страницу: определенные в данный момент несовпадающие таблицы стилей все еще загружаются, но с самым низким приоритетом, чтобы они никогда не конкурировали с ресурсами, которые необходимы сайту прямо сейчас.
![Диаграмма загрузки сети, показывающая, как в светлом режиме CSS темного режима загружается с наименьшим приоритетом.](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-012ca50547d95.png?authuser=5&hl=ru)
![Диаграмма загрузки сети, показывающая, как в темном режиме CSS-код светлого режима загружается с наименьшим приоритетом.](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-2c75aa35a227f.png?authuser=5&hl=ru)
![Диаграмма загрузки сети, показывающая, как в светлом режиме по умолчанию CSS темного режима загружается с наименьшим приоритетом.](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-f53f63ae3c9fc.png?authuser=5&hl=ru)
prefers-color-scheme
загружает CSS темного режима с наименьшим приоритетом. Реакция на изменения темного режима
Как и любое другое изменение медиа-запроса, на изменения темного режима можно подписаться через JavaScript. Вы можете использовать это, например, для динамического изменения значка страницы или изменения <meta name="theme-color">
, который определяет цвет строки URL-адреса в Chrome. Полный пример выше показывает это в действии: чтобы увидеть изменения цвета темы и значка, откройте демо-версию на отдельной вкладке .
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});
Начиная с Chromium 93 и Safari 15, вы можете настроить цвет на основе медиа-запроса с помощью атрибута media
элемента цвета meta
. Будет выбран первый подходящий. Например, вы можете использовать один цвет для светлого режима и другой для темного. На момент написания вы не можете определить их в своем манифесте. См. проблему w3c/manifest#975 GitHub .
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
Отладка и тестирование темного режима
Эмуляция prefers-color-scheme
в DevTools
Переключение цветовой схемы всей операционной системы может очень быстро надоесть, поэтому Chrome DevTools теперь позволяет эмулировать предпочтительную цветовую схему пользователя таким образом, что это влияет только на видимую в данный момент вкладку. Откройте командное меню , начните вводить Rendering
, выполните команду Show Rendering
, а затем измените параметр «Эмуляция мультимедийной функции CSS» предпочитает цветовую схему .
![Снимок экрана с параметром «Эмулировать мультимедийную функцию CSS предпочитает цветовую схему», который находится на вкладке «Визуализация» в Chrome DevTools.](https://web.dev/static/articles/prefers-color-scheme/image/a-screenshot-the-emulat-f4221ac142773.png?authuser=5&hl=ru)
Снимки экрана prefers-color-scheme
с помощью Puppeteer
Puppeteer — это библиотека Node.js, предоставляющая высокоуровневый API для управления Chrome или Chromium через протокол DevTools . С помощью dark-mode-screenshot
мы предоставляем скрипт Puppeteer, который позволяет вам создавать снимки экрана ваших страниц как в темном, так и в светлом режиме. Вы можете запустить этот сценарий как раз или сделать его частью своего набора тестов непрерывной интеграции (CI).
npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
Рекомендации по использованию темного режима
Избегайте чисто белого цвета
Небольшая деталь, которую вы, возможно, заметили: я не использую чистый белый цвет. Вместо этого, чтобы предотвратить свечение и растекание по окружающему темному содержимому, я выбираю немного более темный белый цвет. Что-то вроде rgb(250, 250, 250)
работает хорошо.
Изменение цвета и затемнение фотографических изображений
Если вы сравните два скриншота ниже, вы заметите, что не только основная тема изменилась с темного на светлом на светлое на темном , но и изображение героя выглядит немного иначе. Мое исследование пользователей показало, что большинство опрошенных людей предпочитают чуть менее яркие и яркие изображения, когда активен темный режим. Я называю это перекрашиванием .
![Изображение героя слегка затемнено в темном режиме.](https://web.dev/static/articles/prefers-color-scheme/image/hero-image-slightly-darke-a5b441df726e3.png?authuser=5&hl=ru)
![Обычное изображение героя в светлом режиме.](https://web.dev/static/articles/prefers-color-scheme/image/regular-hero-image-light-28d9151fd34c3.png?authuser=5&hl=ru)
Изменение цвета может быть достигнуто с помощью CSS-фильтра на моих изображениях. Я использую селектор CSS, который соответствует всем изображениям, URL-адрес которых не имеют .svg
. Идея состоит в том, что я могу придать векторной графике (значкам) другую обработку перекрашивания, чем мои изображения (фотографии). Подробнее об этом см. следующий абзац . Обратите внимание, как я снова использую переменную CSS , чтобы позже можно было гибко изменить свой фильтр.
Поскольку перекрашивание необходимо только в темном режиме, то есть когда dark.css
активен, в light.css
нет соответствующих правил.
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
Настройка интенсивности перекрашивания темного режима с помощью JavaScript
Не все одинаковы, и у людей разные потребности в темном режиме. Придерживаясь описанного выше метода перекрашивания, я могу легко сделать интенсивность оттенков серого пользовательским предпочтением, которое можно изменить с помощью JavaScript , а, установив значение 0%
, я также могу полностью отключить перекрашивание. Обратите внимание, что document.documentElement
предоставляет ссылку на корневой элемент документа, то есть на тот же элемент, на который я могу ссылаться с помощью псевдокласса CSS :root
.
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
Инвертировать векторную графику и значки
Для векторной графики — которая в моем случае используется в качестве значков, на которые я ссылаюсь через элементы <img>
— я использую другой метод перекрашивания. Хотя исследования показали, что людям не нравится инверсия фотографий, она очень хорошо работает для большинства значков. Я снова использую переменные CSS, чтобы определить величину инверсии в обычном состоянии и в состоянии :hover
.
![В темном режиме значки инвертируются.](https://web.dev/static/articles/prefers-color-scheme/image/icons-are-inverted-dark-d78f9971c6dd6.png?authuser=5&hl=ru)
![Обычные иконки в светлом режиме.](https://web.dev/static/articles/prefers-color-scheme/image/regular-icons-light-mode-bcabc11023a1e.png?authuser=5&hl=ru)
Обратите внимание, что я снова инвертирую значки только в dark.css
, но не в light.css
, и как :hover
получает разную интенсивность инверсии в двух случаях, чтобы значок выглядел немного темнее или немного ярче, в зависимости от режима, выбранного пользователем. .
/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*='.svg'] {
filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*='.svg']:hover {
filter: var(--icon-filter_hover);
}
Используйте currentColor
для встроенных SVG-файлов.
Для встроенных изображений SVG вместо использования фильтров инверсии можно использовать ключевое слово CSS currentColor
, которое представляет значение свойства color
элемента. Это позволяет использовать значение color
для свойств, которые не получают его по умолчанию. Удобно, что если currentColor
используется в качестве значения атрибутов fill
или stroke
SVG, вместо этого он берет свое значение из унаследованного значения свойства цвета. Еще лучше: это также работает для <svg><use href="…"></svg>
, поэтому вы можете иметь отдельные ресурсы, и currentColor
все равно будет применяться в контексте. Обратите внимание, что это работает только для встроенных или <use href="…">
SVG, но не для SVG, на которые ссылаются как на src
изображения или каким-либо образом через CSS. Вы можете увидеть это в демо ниже.
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
Плавные переходы между режимами
Переключение из темного режима в светлый или наоборот можно сгладить благодаря тому, что и color
, и background-color
являются анимируемыми свойствами CSS . Создать анимацию так же просто, как объявить два transition
для двух свойств. Пример ниже иллюстрирует общую идею, вы можете испытать ее вживую в демо-версии .
body {
--duration: 0.5s;
--timing: ease;
color: var(--color);
background-color: var(--background-color);
transition: color var(--duration) var(--timing), background-color var(
--duration
) var(--timing);
}
Художественное направление с темным режимом
Хотя из соображений производительности загрузки в целом я рекомендую работать исключительно с prefers-color-scheme
в атрибуте media
элементов <link>
(а не с встроенным в таблицы стилей), существуют ситуации, когда вам действительно может потребоваться работать с prefers-color-scheme
непосредственно встроена в ваш HTML-код. Арт-директорство – такая ситуация. В Интернете арт-дирекшн занимается общим визуальным внешним видом страницы и тем, как она визуально коммуницирует, стимулирует настроение, контрастирует с особенностями и психологически привлекает целевую аудиторию.
В темном режиме дизайнер должен решить, какое изображение является лучшим в конкретном режиме и возможно ли перекрашивание изображений недостаточно хорошо. При использовании с элементом <picture>
<source>
отображаемого изображения можно сделать зависимым от атрибута media
. В приведенном ниже примере я показываю западное полушарие для темного режима и восточное полушарие для светлого режима или когда предпочтения не указаны, во всех остальных случаях по умолчанию используется восточное полушарие. Это, конечно, чисто для иллюстративных целей. Переключите темный режим на своем устройстве, чтобы увидеть разницу.
<picture>
<source srcset="western.webp" media="(prefers-color-scheme: dark)" />
<source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
<img src="eastern.webp" />
</picture>
Темный режим, но добавьте возможность отказа
Как упоминалось выше в разделе «Почему темный режим» , темный режим — это эстетический выбор для большинства пользователей. Как следствие, некоторым пользователям действительно может нравиться, чтобы пользовательский интерфейс операционной системы был скрытым, но они все же предпочитают видеть свои веб-страницы такими, какими они привыкли их видеть. Отличный шаблон — сначала придерживаться сигнала, который браузер отправляет через prefers-color-scheme
, а затем при необходимости разрешить пользователям переопределить настройки системного уровня.
Пользовательский элемент <dark-mode-toggle>
Код для этого вы, конечно, можете создать самостоятельно, но можно и просто использовать готовый пользовательский элемент (веб-компонент), который я создал специально для этой цели. Он называется <dark-mode-toggle>
и добавляет на вашу страницу переключатель (темный режим: вкл./выкл.) или переключатель тем (тема: светлый/темный), который вы можете полностью настроить. Демонстрация ниже показывает элемент в действии (о, и я также 🤫 молча подсунул его во все остальные примеры выше ).
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle>
![темный режим — переключение в светлый режим.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-4a5dd3fe9675d.png?authuser=5&hl=ru)
<dark-mode-toggle>
в светлом режиме. ![темный режим — переключение в светлый режим.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-f0b507bcb5df2.png?authuser=5&hl=ru)
<dark-mode-toggle>
в темном режиме.Попробуйте щелкнуть или коснуться элементов управления темным режимом в правом верхнем углу демо-версии ниже. Если вы установите галочку в третьем и четвертом элементе управления, увидите, как ваш выбор режима запоминается даже при перезагрузке страницы. Это позволяет вашим посетителям сохранять свою операционную систему в темном режиме, но наслаждаться вашим сайтом в светлом режиме или наоборот.
Выводы
Работа с темным режимом и его поддержка доставляют удовольствие и открывают новые возможности для дизайна. Для некоторых ваших посетителей это может быть разницей между неспособностью управлять вашим сайтом и счастливым пользователем. Есть некоторые подводные камни, и определенно требуется тщательное тестирование, но темный режим определенно является для вас отличной возможностью показать, что вы заботитесь обо всех своих пользователях. Лучшие практики, упомянутые в этом посте, и такие помощники, как пользовательский элемент <dark-mode-toggle>
, должны вселить в вас уверенность в своей способности создать потрясающий темный режим. Дайте мне знать в Твиттере , что вы создаете, и был ли этот пост полезен, а также предложения по его улучшению. Спасибо за прочтение! 🌒
Ссылки по теме
Ресурсы для медиа-запроса prefers-color-scheme
:
Ресурсы для метатега color-scheme
и свойства CSS:
- Свойство CSS
color-scheme
и метатег - Страница состояния платформы Chrome
- Ошибка хрома
- Спецификация модуля настройки цвета CSS, уровень 1
- CSS WG GitHub Проблема с метатегом и свойством CSS
- HTML WHATWG GitHub Проблема с метатегом
Общие ссылки на темный режим:
- Material Design — темная тема
- Темный режим в веб-инспекторе
- Поддержка темного режима в WebKit
- Рекомендации Apple по пользовательскому интерфейсу — темный режим
Справочные исследовательские статьи для этого поста:
- Что на самом деле делают «поддерживаемые цветовые схемы» Dark Mode? 🤔
- Да будет тьма! 🌚Может быть…
- Изменение цвета для темного режима
Благодарности
Медиа prefers-color-scheme
, CSS color-scheme
и связанный с ней метатег — это результат реализации 👏 Rune Lillesveen . Руне также является соредактором спецификации CSS Color Adjustment Module Level 1 . Я хотел бы 🙏 поблагодарить Лукаша Збылута , Роуэна Меревуда , Чирага Десаи и Роба Додсона за их подробные рецензии на эту статью. Стратегия загрузки — детище Джейка Арчибальда . Эмилио Кобос Альварес указал мне на правильный метод определения prefers-color-scheme
. Совет со ссылками на SVG и currentColor
пришел от Тимоти Хэтчера . Наконец, я благодарен многочисленным анонимным участникам различных исследований пользователей, которые помогли сформировать рекомендации в этой статье. Изображение героя Натана Андерсона .
Переоценка или необходимость? Узнайте все о темном режиме и о том, как его поддерживать на благо ваших пользователей!
Введение
Темный режим перед темным режимом
![Монитор компьютера с зеленым экраном](https://web.dev/static/articles/prefers-color-scheme/image/green-screen-computer-mon-01027d880d7ee.jpg?authuser=5&hl=ru)
Мы прошли полный круг с темным режимом. На заре персональных компьютеров темный режим был не вопросом выбора, а фактом: монохромные компьютерные ЭЛТ- мониторы работали, направляя электронные лучи на фосфоресцирующий экран, а люминофор, используемый в ранних ЭЛТ, был зеленым. Поскольку текст отображался зеленым цветом, а остальная часть экрана была черной, эти модели часто называли зелеными экранами .
![Обработка текста «темно-белое»](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-word-processi-c815d99e74013.jpg?authuser=5&hl=ru)
Представленные впоследствии цветные ЭЛТ отображали несколько цветов за счет использования красного, зеленого и синего люминофора. Они создали белый цвет, одновременно активировав все три люминофора. С появлением более сложных настольных издательских систем WYSIWYG идея сделать виртуальный документ похожим на физический лист бумаги стала популярной.
![Темно-белая веб-страница в браузере WorldWideWeb](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-webpage-the-b32b5ae575bbe.png?authuser=5&hl=ru)
Именно здесь зародилась тенденция в дизайне «темное на белом» , и эта тенденция была перенесена в раннюю версию Интернета, основанного на документах . Самый первый браузер WorldWideWeb (помните, CSS еще даже не был изобретен ) отображал веб-страницы таким образом. Забавный факт: второй браузер Line Mode Browser — браузер на базе терминала — имел зеленый цвет на темном фоне. В наши дни веб-страницы и веб-приложения обычно разрабатываются с использованием темного текста на светлом фоне — базовое предположение, которое также жестко запрограммировано в таблицах стилей пользовательских агентов, включая файлы .
![Использование смартфона, лежа в постели](https://web.dev/static/articles/prefers-color-scheme/image/smartphone-used-while-lyi-d0cbc01823ee4.jpg?authuser=5&hl=ru)
Времена ЭЛТ давно прошли. Потребление и создание контента перешло на мобильные устройства, использующие ЖК-экраны с подсветкой или энергосберегающие AMOLED- экраны. Меньшие по размеру и более мобильные компьютеры, планшеты и смартфоны привели к появлению новых моделей использования. Задачи в свободное время, такие как просмотр веб-страниц, программирование для развлечения и высококачественные игры, часто выполняются в нерабочее время в затемненных помещениях. Люди даже наслаждаются своими устройствами, лежа в постели по ночам. Чем больше людей используют свои устройства в темноте, тем популярнее становится идея вернуться к истокам принципа «свет-в-тьме» .
Почему темный режим
Темный режим по эстетическим соображениям
Когда людей спрашивают , почему им нравится или нужен темный режим , самый популярный ответ — «это приятнее для глаз», а затем «это элегантно и красиво». Apple в своей документации для разработчиков Dark Mode прямо пишет: «Выбор включения светлого или темного внешнего вида является эстетическим для большинства пользователей и может не зависеть от условий окружающего освещения».
![CloseView в Mac OS System 7 с](https://web.dev/static/articles/prefers-color-scheme/image/closeview-mac-os-system-d5554c867b6af.png?authuser=5&hl=ru)
Темный режим как инструмент доступности
Есть также люди, которым действительно нужен темный режим и которые используют его как еще один инструмент доступности, например, пользователи с плохим зрением. Самый ранний экземпляр такого инструмента специальных возможностей, который я смог найти, — это функция CloseView в System 7 , которая имела переключатель «Черное на белом» и «Белое на черном» . Хотя System 7 поддерживала цвет, пользовательский интерфейс по умолчанию по-прежнему оставался черно-белым.
Эти реализации, основанные на инверсии, продемонстрировали свои слабые стороны после появления цвета. Исследование пользователей, проведенное Szpiro et al. о том, как люди с плохим зрением получают доступ к компьютерным устройствам и показывают, что всем опрошенным пользователям не нравятся перевернутые изображения, но многие предпочитают светлый текст на темном фоне. Apple учитывает это предпочтение пользователя с помощью функции Smart Invert , которая меняет цвета на дисплее, за исключением изображений, мультимедиа и некоторых приложений, использующих темные цветовые стили.
Особой формой плохого зрения является синдром компьютерного зрения, также известный как цифровое напряжение глаз, который определяется как «сочетание проблем со зрением и глазами, связанных с использованием компьютеров (включая настольные компьютеры, ноутбуки и планшеты) и других электронных дисплеев ( например, смартфоны и электронные устройства для чтения)». Было высказано предположение , что использование электронных устройств подростками, особенно в ночное время, приводит к повышенному риску сокращения продолжительности сна, увеличения латентного периода засыпания и увеличения дефицита сна. Кроме того, согласно исследованиям Розенфилда , широко известно , что воздействие синего света участвует в регуляции циркадного ритма и цикла сна, а нерегулярное освещение может привести к лишению сна, что может повлиять на настроение и выполнение задач. Чтобы ограничить эти негативные эффекты, может помочь уменьшение синего света путем регулировки цветовой температуры дисплея с помощью таких функций, как Night Shift в iOS или Night Light в Android, а также избегание яркого света или неравномерного освещения в целом с помощью темных тем или темных режимов.
Экономия энергии в темном режиме на экранах AMOLED
Наконец, известно, что темный режим экономит много энергии на экранах AMOLED . Тематические исследования Android, посвященные популярным приложениям Google, таким как YouTube, показали, что экономия энергии может достигать 60%. В видеоролике ниже представлена более подробная информация об этих тематических исследованиях и экономии энергии для каждого приложения.
Активация темного режима в операционной системе
Теперь, когда я рассказал, почему темный режим так важен для многих пользователей, давайте рассмотрим, как вы можете его поддерживать.
![Настройки темного режима Android Q](https://web.dev/static/articles/prefers-color-scheme/image/android-q-dark-mode-setti-43e0e230e78da.png?authuser=5&hl=ru)
В операционных системах, поддерживающих темный режим или темную тему, обычно есть возможность активировать его где-то в настройках. В macOS X он находится в разделе «Общие » системных настроек и называется «Внешний вид » ( скриншот ), а в Windows 10 — в разделе «Цвета» и называется «Выберите цвет» ( скриншот ). Для Android Q вы можете найти его в разделе «Отображать как тумблер темной темы» ( скриншот ), а в iOS 13 вы можете изменить « Внешний вид» в разделе «Отображение и яркость» настроек ( скриншот ).
Медиа-запрос prefers-color-scheme
И последний кусочек теории, прежде чем я начну. Медиа-запросы позволяют авторам тестировать и запрашивать значения или функции пользовательского агента или устройства отображения независимо от отображаемого документа. Они используются в правиле CSS @media
для условного применения стилей к документу, а также в различных других контекстах и языках, таких как HTML и JavaScript. Медиа-запросы уровня 5 представляют так называемые медиа-функции пользовательских предпочтений, то есть позволяют сайтам определять предпочтительный способ отображения контента пользователем.
Медиа prefers-color-scheme
используется для определения того, запросил ли пользователь на странице использование светлой или темной цветовой темы. Он работает со следующими значениями:
-
light
: указывает, что пользователь уведомил систему о том, что он предпочитает страницу со светлой темой (темный текст на светлом фоне). -
dark
: указывает, что пользователь уведомил систему о том, что он предпочитает страницу с темной темой (светлый текст на темном фоне).
Поддержка темного режима
Узнайте, поддерживается ли темный режим браузером
Поскольку темный режим сообщается через медиа-запрос, вы можете легко проверить, поддерживает ли текущий браузер Dark Mode, проверяя prefers-color-scheme
. Обратите внимание, как я не включаю какую -либо ценность, но чисто проверяйте, соответствует ли только запрос СМИ.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
На момент написания, prefers-color-scheme
поддерживается как на рабочем столе, так и на мобильных устройствах (где доступно) Chrome и Edge на версии 76, Firefox на версии 67 и Safari как версия 12.1 на MacOS и как версия 13 на iOS. Для всех других браузеров вы можете проверить, что я могу использовать таблицы поддержки .
Узнание о предпочтениях пользователя во время запроса
Заголовок клиента Sec-CH-Prefers-Color-Scheme
подсказки позволяет сайтам получать предпочтения цветовой схемы пользователя при опциональном времени во время запроса, позволяя серверам внедрять правильные CSS и, следовательно, избежать вспышки неверной цветовой темы.
Темный режим на практике
Наконец -то посмотрим, как на практике выглядит поддержка Dark Mode. Как и в Highlander , с темным режимом может быть только один : темный или светлый, но никогда не оба! Почему я упоминаю об этом? Потому что этот факт должен оказывать влияние на стратегию загрузки. Пожалуйста, не заставляйте пользователей загружать CSS в критическом пути рендеринга, который предназначен для режима, который они в настоящее время не используют. Чтобы оптимизировать скорость нагрузки, я разделяю свой CSS для приложения приложения, которое показывает следующие рекомендации на практике на три части, чтобы отложить некритическую CSS :
-
style.css
, который содержит общие правила, которые используются повсеместно на сайте. -
dark.css
, который содержит только те правила, необходимые для темного режима. -
light.css
, который содержит только те правила, необходимые для режима света.
Стратегия загрузки
Два последних, light.css
и dark.css
, загружаются условно с помощью запроса <link media>
. Первоначально, не все браузеры будут поддерживать prefers-color-scheme
(обнаруживаются с использованием приведенного выше шаблона ), с которым я имею динамически, загружая файл light.css
по умолчанию через условно вставленную <link rel="stylesheet">
в тонком конном. Скрипт (Light - это произвольный выбор, я мог бы также сделать мрачный опыт резервного опыта). Чтобы избежать вспышки непревзойденного контента , я скрываю содержание страницы до тех пор, пока light.css
не будет загружен.
<script>
// If `prefers-color-scheme` is not supported, fall back to light mode.
// In this case, light.css will be downloaded with `highest` priority.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<!--
Conditionally either load the light or the dark stylesheet. The matching file
will be downloaded with `highest`, the non-matching file with `lowest`
priority. If the browser doesn't support `prefers-color-scheme`, the media
query is unknown and the files are downloaded with `lowest` priority (but
above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
rel="stylesheet"
href="/light.css"
media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />
Стили -лист архитектура
Я максимально dark.css
переменные CSS light.css
это позволяет моему общему style.css
. Ниже вы можете увидеть отрывок из реальных стилей, но этого должно быть достаточно, чтобы передать общую идею. Я объявляю две переменные, --color
и --background-color
, которые по сути создают темную и легкую базовую тему.
/* light.css: 👉 dark-on-light */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
}
/* dark.css: 👉 light-on-dark */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
}
В моем style.css
. Затем я использую эти переменные в правиле body { … }
. Как они определены на :root
css pseudo-class -селектор, который в HTML представляет элемент <html>
и идентичен селектору html
, за исключением того, что его специфичность выше-они каскад вниз, что служит мне для объявления Global CSS переменные.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
В примере кода вы, вероятно, заметите color-scheme
свойства с пространственным значением light dark
.
Это говорит о браузере, какой цвет темы, который поддерживает мое приложение, и позволяет ему активировать специальные варианты таблицы стилей пользователя, что полезно, например, позволяет рендерингу с темным фоном и световым текстом, отрегулируйте полосы прокрутки, Или чтобы включить цвет с учетом темы. Точные детали color-scheme
указаны на уровне 1-го модуля CSS-модуля .
Все остальное - это просто вопрос определения переменных CSS для вещей, которые имеют значение на моем сайте. Семантически организация стилей очень помогает при работе с темным режимом. Например, вместо того, чтобы --highlight-yellow
, рассмотрите --accent-color
, как «желтый» на самом деле не быть желтым в темном режиме или наоборот. Ниже приведен пример некоторых более переменных, которые я использую в своем примере.
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}
Полный пример
В следующем встраивании вы можете увидеть полный пример, который приводит концепции сверху на практике. Попробуйте переключать темный режим в настройках вашей конкретной операционной системы и посмотрите, как реагирует страница.
Воздействие погрузки
Когда вы играете с этим примером, вы можете понять, почему я загружаю свой dark.css
и light.css
через медиа -запросы. Попробуйте переключить темный режим и перезагрузить страницу: конкретные в настоящее время не совпадают таблицы стилей, но с самым низким приоритетом, так что они никогда не конкурируют с ресурсами, которые необходимы Сайт прямо сейчас.
![Схема загрузки сети, показывающая, как в режиме света CSS Dark Mues загружается с самым низким приоритетом](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-012ca50547d95.png?authuser=5&hl=ru)
![Схема загрузки сети, показывающая, как в темноте режим света CSS загружается с самым низким приоритетом](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-2c75aa35a227f.png?authuser=5&hl=ru)
![Схема загрузки сети, показывающая, как в режиме света по умолчанию CSS Dark Mues загружается с самым низким приоритетом](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-f53f63ae3c9fc.png?authuser=5&hl=ru)
prefers-color-scheme
загружает CSS Dark Mode с самым низким приоритетом. Реагировать на изменения в темном режиме
Как и любое другое изменение медиа -запроса, изменения в режиме темного режима могут быть подписаны через JavaScript. Вы можете использовать это, например, динамически изменить измерение страницы или изменить <meta name="theme-color">
, который определяет цвет URL-панели в Chrome. Полный пример выше показывает это в действии, чтобы увидеть цвет темы и изменения Favicon, откройте демонстрацию в отдельной вкладке .
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});
По состоянию на Chromium 93 и Safari 15, вы можете настроить цвет на основе медиа -запроса с атрибутом media
meta
Theme Color Element. Первый, который будет выбран. Например, у вас может быть один цвет для режима света и другой для темного режима. Во время написания вы не можете определить тех, кто в своем манифесте. См. W3C/Manifest#975 Выпуск GitHub .
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
Отладка и тестирование темного режима
Эмуляция prefers-color-scheme
Переключение цветовой схемы всей операционной системы может быть раздражающей очень быстро, поэтому Chrome Devtools теперь позволяет эмулировать предпочтительную цветовую схему пользователя таким образом, чтобы влиять только на видимую вкладку. Откройте меню команд , начните вводить Rendering
, запустите команду Show Rendering
, а затем измените эмуляцию функции CSS Media Prefers Prefers-Scheme .
![Экраншот опции «Эмуляция CSS Media Media» предпочитает Color-Scheme ', который расположен на вкладке рендеринга Chrome Devtools](https://web.dev/static/articles/prefers-color-scheme/image/a-screenshot-the-emulat-f4221ac142773.png?authuser=5&hl=ru)
Скриншот prefers-color-scheme
Кукольник -это библиотека Node.js, которая обеспечивает API высокого уровня для контроля хрома или хрома по протоколу DevTools . Благодаря dark-mode-screenshot
мы предоставляем сценарий кукловода, который позволяет создавать скриншоты ваших страниц как в темном, так и в светом режиме. Вы можете запустить этот скрипт как одноразовый или альтернативно сделать его частью вашего тестового набора тестирования непрерывной интеграции (CI).
npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
Лучшие практики темного режима
Избегайте чистого белого
Маленькая деталь, которую вы, возможно, заметили, это то, что я не использую Pure White. Вместо этого, чтобы предотвратить светящиеся и кровотечение в отношении окружающего темного содержания, я выбираю немного более темный белый. Что -то вроде rgb(250, 250, 250)
работает хорошо.
Перекрасить и темнеть фотографические изображения
Если вы сравните два скриншота ниже, вы заметите, что не только основная тема изменилась от темного на свет на свет на темноте , но и изображение героя выглядит немного по-другому. Мое пользовательское исследование показало, что большинство опрошенных людей предпочитают немного менее динамичные и блестящие изображения, когда темный режим активен. Я называю это повторной колоризацией .
![Изображение героя слегка потемнело в темном режиме.](https://web.dev/static/articles/prefers-color-scheme/image/hero-image-slightly-darke-a5b441df726e3.png?authuser=5&hl=ru)
![Обычное изображение героя в режиме света.](https://web.dev/static/articles/prefers-color-scheme/image/regular-hero-image-light-28d9151fd34c3.png?authuser=5&hl=ru)
Повторная цветоризация может быть достигнута с помощью фильтра CSS на моих изображениях. Я использую селектор CSS, который соответствует всем изображениям, у которых нет .svg
в их URL-адресе, и идея заключается в том, что я могу дать векторную графику (значки) другое повторное цветолонизационное лечение, чем мои изображения (фотографии), больше об этом в Следующий абзац . Обратите внимание, как я снова использую переменную CSS , чтобы позже я мог гибко изменить свой фильтр.
Поскольку повторная цветоризация необходима только в темном режиме, то есть, когда dark.css
активен, в light.css
нет соответствующих правил.
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
Настройка интенсивности повторной цветоризации темного режима с помощью JavaScript
Не все одинаковы, и у людей разные потребности в темном режиме. Придерживаясь метода повторной колоризации, описанного выше, я могу легко сделать интенсивность серого становления с предпочтением пользователя, который я могу изменить с помощью JavaScript , и, установив значение 0%
, я также могу полностью отключить повторную колоризацию. Обратите внимание, что document.documentElement
предоставляет ссылку на корневой элемент документа, то есть тот же элемент, который я могу ссылаться с :root
css pseudo-класс .
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
Инвертировать векторную графику и значки
Для векторной графики-что в моем случае используются в качестве значков, которые я ссылаюсь на элементы <img>
-я использую другой метод повторной цветной чистки. Хотя исследования показали, что людям не нравится инверсия для фотографий, это очень хорошо работает для большинства икон. Опять же, я использую переменные CSS, чтобы определить сумму инверсии в обычном и в состоянии :hover
.
![Значки перевернуты в темном режиме.](https://web.dev/static/articles/prefers-color-scheme/image/icons-are-inverted-dark-d78f9971c6dd6.png?authuser=5&hl=ru)
![Регулярные значки в режиме света.](https://web.dev/static/articles/prefers-color-scheme/image/regular-icons-light-mode-bcabc11023a1e.png?authuser=5&hl=ru)
Обратите внимание, как еще раз я :hover
только значки в dark.css
, но не в light.css
. .
/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*='.svg'] {
filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*='.svg']:hover {
filter: var(--icon-filter_hover);
}
Используйте currentColor
для встроенных SVGS
Для встроенных изображений SVG, вместо использования инверсионных фильтров , вы можете использовать ключевое слово currentColor
CSS, которое представляет значение свойства color
элемента. Это позволяет использовать значение color
на свойствах, которые не получают его по умолчанию. Удобно, если currentColor
используется в качестве значения атрибутов fill
SVG или stroke
, он вместо этого берет свое значение от наследственного значения свойства цвета. Еще лучше: это также работает для <svg><use href="…"></svg>
, так что вы можете иметь отдельные ресурсы, и currentColor
все равно будет применяться в контексте. Обратите внимание, что это работает только для inline или <use href="…">
SVGS, но не SVG, которые называются src
изображения или каким -то образом через CSS. Вы можете увидеть это применительно в демонстрации ниже.
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
Плавные переходы между режимами
Переключение от темного режима на режим света или наоборот можно сгладить благодаря тому, что как color
, так и background-color
являются анимируемыми свойствами CSS . Создание анимации так же просто, как объявить два transition
S для двух свойств. Пример ниже иллюстрирует общую идею, вы можете испытать ее жить в демонстрации .
body {
--duration: 0.5s;
--timing: ease;
color: var(--color);
background-color: var(--background-color);
transition: color var(--duration) var(--timing), background-color var(
--duration
) var(--timing);
}
Художественное направление с темным режимом
В то время как для загрузки причин производительности в целом я рекомендую исключительно работать с prefers-color-scheme
в атрибуте media
Elements <link>
(а не в линии в таблицах стилей), существуют ситуации, когда вы на самом деле можете работать с prefers-color-scheme
непосредственно встроенной в вашем HTML -коде. Художественное направление - такая ситуация. В Интернете Art Direction имеет дело с общим визуальным внешним видом страницы и то, как она общается визуально, стимулирует настроение, контрастирует и психологически привлекает целевую аудиторию.
С темным режимом решает дизайнера решить, какое лучшее изображение в конкретном режиме и, возможно, повторная цветообразование изображений , возможно, недостаточно . При использовании с элементом <picture>
, <source>
показанное изображение может быть сделано в зависимости от атрибута media
. В приведенном ниже примере я показываю западное полушарие для темного режима и восточное полушарие для режима света или когда предпочтение не дается, не дефолт на восточное полушарие во всех других случаях. Это, конечно, исключительно для иллюстративных целей. Переключайте темный режим на вашем устройстве, чтобы увидеть разницу.
<picture>
<source srcset="western.webp" media="(prefers-color-scheme: dark)" />
<source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
<img src="eastern.webp" />
</picture>
Темный режим, но добавьте отказа
Как упоминалось в разделе «Почему темный режим» , темный режим является эстетическим выбором для большинства пользователей. В результате некоторым пользователям может быть фактически иметь свой пользовательский интерфейс операционной системы в Dark, но все же предпочитает видеть свои веб -страницы так, как они привыкли видеть их. Отличный шаблон заключается в том, чтобы первоначально придерживаться сигнала, который браузер отправляет через prefers-color-scheme
, но затем, необязательно, позволить пользователям переопределить свои настройки системного уровня.
<dark-mode-toggle>
Пользовательский элемент
Вы, конечно, можете создать код для этого самостоятельно, но вы также можете просто использовать готовый пользовательский элемент (веб-компонент), который я создал правильно для этой цели. Он называется <dark-mode-toggle>
и добавляет к вашей странице переключатель (темный режим: включен/выключен) или переключатель темы (тема: Light/Dark), которую вы можете полностью настроить. Демонстрация ниже показывает элемент в действии (о, и я также молча пробил его во всех других примерах выше ).
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle>
![темно-режим, в режиме света.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-4a5dd3fe9675d.png?authuser=5&hl=ru)
<dark-mode-toggle>
в режиме света. ![темно-режим, в режиме света.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-f0b507bcb5df2.png?authuser=5&hl=ru)
<dark-mode-toggle>
в темном режиме.Попробуйте щелкнуть или постучать по элементам управления темным режимом в верхнем правом углу в демонстрации ниже. Если вы проверите флажок в третьем и четвертом элементе управления, посмотрите, как запоминается выбор вашего режима, даже когда вы перезагружаете страницу. Это позволяет вашим посетителям сохранять свою операционную систему в темном режиме, но наслаждайтесь вашим сайтом в режиме света или наоборот.
Выводы
Работа с темным режимом и поддержка - это весело и открывает новые возможности дизайна. Для некоторых из ваших посетителей это может быть разницей между неспособностью справиться с вашим сайтом и быть счастливым пользователем. Существуют некоторые подводные камни и тщательное тестирование, безусловно, требуется, но Dark Mode, безусловно, является отличной возможностью для вас, чтобы показать, что вы заботитесь обо всех своих пользователях. Лучшие практики, упомянутые в этом посте, и помощники, такие как <dark-mode-toggle>
пользовательский элемент, должны проявить вас уверены в вашей способности создавать удивительный опыт темного режима». Дайте мне знать в Твиттере , что вы создаете, и если этот пост был полезным, или также предложения по его улучшению. Спасибо за прочтение! 🌒
Ссылки по теме
Ресурсы для prefers-color-scheme
:
Ресурсы для Meta color-scheme
Meta Tag и CSS Property:
- Свойство
color-scheme
CSCHEME CSS - Страница состояния хромирования платформы
- Хром -ошибка
- CSS Color Mortraging Module Spect 1 Spect
- CSS WG GitHub Проблема для метага и свойства CSS
- Html whatwg GitHub Проблема для метага
Общие ссылки на режим темного режима:
- Дизайн материала - тема. Тема
- Темный режим в веб -инспекторе
- Поддержка темного режима в Webkit
- Руководящие принципы Apple Human Interface - режим Dark
Статьи о справочных исследованиях для этого поста:
- Что на самом деле делает «поддерживаемые схемы» Dark Mode? 🤔
- Пусть будет тьма! 🌚 Может быть ...
- Повторная колоризация для темного режима
Благодарности
prefers-color-scheme
, свойство CSSSE color-scheme
и соответствующая мета теги-это работа внедрения 👏 Rune LilleSveen . Руна также является соредактором модуля CSS Colort Module Spec. Я хотел бы 🙏 поблагодарить Лукаша Збилута , Роуэн Моревуд , Чираг Десаи и Роба Додсона за их тщательные обзоры этой статьи. Стратегия загрузки - детище Джейка Арчибальда . Эмилио Кобос Альварес указал мне на правильный метод обнаружения prefers-color-scheme
. Совет с ссылками SVG и currentColor
пришел от Тимоти Хэтчер . Наконец, я благодарен многим анонимным участникам различных пользовательских исследований, которые помогли сформировать рекомендации в этой статье. Герой Изображение Натана Андерсона .