Эта страница переведена с помощью Cloud Translation API.

предпочитает-цветовую-схему: Привет, тьма, мой старый друг

Переоценка или необходимость? Узнайте все о темном режиме и о том, как его поддерживать на благо ваших пользователей!

Thomas Steiner

Введение

Темный режим перед темным режимом

Монитор компьютера с зеленым экраном — Зеленый экран ( Источник )

Мы прошли полный круг с темным режимом. На заре персональных компьютеров темный режим был не вопросом выбора, а фактом: монохромные компьютерные ЭЛТ- мониторы работали, направляя электронные лучи на фосфоресцирующий экран, а люминофор, используемый в ранних ЭЛТ, был зеленым. Поскольку текст отображался зеленым цветом, а остальная часть экрана была черной, эти модели часто называли зелеными экранами .

Обработка текста «темно-белое» — Темное на белом ( Источник )

Представленные впоследствии цветные ЭЛТ отображали несколько цветов за счет использования красного, зеленого и синего люминофора. Они создали белый цвет, одновременно активировав все три люминофора. С появлением более сложных настольных издательских систем WYSIWYG идея сделать виртуальный документ похожим на физический лист бумаги стала популярной.

Темно-белая веб-страница в браузере WorldWideWeb — Браузер WorldWideWeb ( Источник )

Именно здесь зародилась тенденция в дизайне «темное на белом» , и эта тенденция была перенесена в раннюю версию Интернета, основанного на документах . Самый первый браузер WorldWideWeb (помните, CSS еще даже не был изобретен ) отображал веб-страницы таким образом. Забавный факт: второй браузер Line Mode Browser — браузер на базе терминала — имел зеленый цвет на темном фоне. В наши дни веб-страницы и веб-приложения обычно разрабатываются с темным текстом на светлом фоне — базовое предположение, которое также жестко запрограммировано в таблицах стилей пользовательских агентов, включая файлы .

Использование смартфона, лежа в постели — Использование смартфона в постели (Источник: Unsplash)

Времена ЭЛТ давно прошли. Потребление и создание контента перешло на мобильные устройства, использующие ЖК-экраны с подсветкой или энергосберегающие AMOLED- экраны. Меньшие по размеру и более мобильные компьютеры, планшеты и смартфоны привели к появлению новых моделей использования. Задачи в свободное время, такие как просмотр веб-страниц, программирование для развлечения и высококачественные игры, часто выполняются в нерабочее время в затемненных помещениях. Люди даже наслаждаются своими устройствами, лежа в постели по ночам. Чем больше людей используют свои устройства в темноте, тем популярнее становится идея вернуться к истокам принципа «свет в темноте» .

Почему темный режим

Темный режим по эстетическим соображениям

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

CloseView в Mac OS System 7 с — Система 7 CloseView ( Источник )

Темный режим как инструмент доступности

Есть также люди, которым действительно нужен темный режим и которые используют его как еще один инструмент доступности, например, пользователи с плохим зрением. Самый ранний экземпляр такого инструмента специальных возможностей, который я смог найти, — это функция 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 — Настройки темной темы Android Q

В операционных системах, поддерживающих темный режим или темную тему, обычно есть возможность активировать его где-то в настройках. В macOS X он находится в разделе «Общие » системных настроек и называется «Внешний вид » ( скриншот ), а в Windows 10 — в разделе «Цвета» и называется «Выберите цвет» ( скриншот ). Для Android Q вы можете найти его в разделе «Отображать как тумблер темной темы» ( скриншот ), а в iOS 13 вы можете изменить « Внешний вид» в разделе «Отображение и яркость» настроек ( скриншот ).

Медиа-запрос `prefers-color-scheme`

И последний кусочек теории, прежде чем я начну. Медиа-запросы позволяют авторам тестировать и запрашивать значения или функции пользовательского агента или устройства отображения независимо от отображаемого документа. Они используются в правиле CSS @media для условного применения стилей к документу, а также в различных других контекстах и языках, таких как HTML и JavaScript. Медиа-запросы уровня 5 представляют так называемые медиа-функции пользовательских предпочтений, то есть позволяют сайтам определять предпочтительный способ отображения контента пользователем.

Примечание. ☝️ Установленная медиа-функция предпочтений пользователя prefers-reduced-motion , которая позволяет вам обнаружить желание меньшего движения на странице. Я уже писал о prefers-reduced-motion .

Медиа prefers-color-scheme используется для определения того, запросил ли пользователь на странице использование светлой или темной цветовой темы. Он работает со следующими значениями:

light : указывает, что пользователь уведомил систему о том, что он предпочитает страницу со светлой темой (темный текст на светлом фоне).
dark : указывает, что пользователь уведомил систему о том, что он предпочитает страницу с темной темой (светлый текст на темном фоне).

Примечание. Более ранняя версия спецификации включала третье значение — no-preference . Это должно было указать, что пользователь не сделал никаких предпочтений, известных системе. Поскольку ни один браузер никогда не реализовал это, значение было удалено из спецификации.

Поддержка темного режима

Выясняем, поддерживается ли темный режим браузером

Поскольку о темном режиме сообщается посредством медиа-запроса, вы можете легко проверить, поддерживает ли текущий браузер темный режим, проверив, совпадает ли вообще медиа-запрос 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 темного режима загружается с наименьшим приоритетом. — Сайт в светлом режиме загружает CSS темного режима с наименьшим приоритетом.

Диаграмма загрузки сети, показывающая, как в темном режиме CSS-код светлого режима загружается с наименьшим приоритетом. — Сайт в темном режиме загружает CSS светлого режима с наименьшим приоритетом.

Диаграмма загрузки сети, показывающая, как в светлом режиме по умолчанию CSS темного режима загружается с наименьшим приоритетом. — Сайт в светлом режиме по умолчанию в браузере, который не поддерживает `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.

Снимки экрана `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

Выводы

Работа с темным режимом и его поддержка доставляют удовольствие и открывают новые возможности для дизайна. Для некоторых ваших посетителей это может быть разницей между неспособностью управлять вашим сайтом и счастливым пользователем. Есть некоторые подводные камни, и определенно требуется тщательное тестирование, но темный режим определенно является для вас отличной возможностью показать, что вы заботитесь обо всех своих пользователях. Лучшие практики, упомянутые в этом посте, и такие помощники, как пользовательский элемент <dark-mode-toggle> , должны вселить в вас уверенность в своей способности создать потрясающий темный режим. Дайте мне знать в Твиттере , что вы создаете, и был ли этот пост полезен, а также предложения по его улучшению. Спасибо за прочтение! 🌒

Ссылки по теме

Ресурсы для медиа-запроса prefers-color-scheme :

Ресурсы для метатега color-scheme и свойства CSS:

Общие ссылки на темный режим:

Справочные исследовательские статьи для этого поста:

Благодарности

Медиа prefers-color-scheme , CSS color-scheme и связанный с ней метатег — это результат реализации 👏 Rune Lillesveen . Руне также является соредактором спецификации CSS Color Adjustment Module Level 1 . Я хотел бы 🙏 поблагодарить Лукаша Збылута , Роуэна Меревуда , Чирага Десаи и Роба Додсона за их подробные рецензии на эту статью. Стратегия загрузки — детище Джейка Арчибальда . Эмилио Кобос Альварес указал мне на правильный метод определения prefers-color-scheme . Совет со ссылками на SVG и currentColor пришел от Тимоти Хэтчера . Наконец, я благодарен многочисленным анонимным участникам различных исследований пользователей, которые помогли сформировать рекомендации в этой статье. Изображение героя Натана Андерсона .

Thomas Steiner

Введение

Темный режим перед темным режимом

Именно здесь зародилась тенденция в дизайне «темное на белом» , и эта тенденция была перенесена в раннюю версию Интернета, основанного на документах . Самый первый браузер WorldWideWeb (помните, CSS еще даже не был изобретен ) отображал веб-страницы таким образом. Забавный факт: второй браузер Line Mode Browser — браузер на базе терминала — имел зеленый цвет на темном фоне. В наши дни веб-страницы и веб-приложения обычно разрабатываются с использованием темного текста на светлом фоне — базовое предположение, которое также жестко запрограммировано в таблицах стилей пользовательских агентов, включая файлы .

Почему темный режим

Темный режим по эстетическим соображениям

Темный режим как инструмент доступности

Эти реализации, основанные на инверсии, продемонстрировали свои слабые стороны после появления цвета. Исследование пользователей, проведенное Szpiro et al. о том, как люди с плохим зрением получают доступ к компьютерным устройствам и показывают, что всем опрошенным пользователям не нравятся перевернутые изображения, но многие предпочитают светлый текст на темном фоне. Apple учитывает это предпочтение пользователя с помощью функции Smart Invert , которая меняет цвета на дисплее, за исключением изображений, мультимедиа и некоторых приложений, использующих темные цветовые стили.

Экономия энергии в темном режиме на экранах AMOLED

Активация темного режима в операционной системе

Медиа-запрос `prefers-color-scheme`

light : указывает, что пользователь уведомил систему о том, что он предпочитает страницу со светлой темой (темный текст на светлом фоне).
dark : указывает, что пользователь уведомил систему о том, что он предпочитает страницу с темной темой (светлый текст на темном фоне).

Примечание. Более ранняя версия спецификации включала третье значение — no-preference . Это должно было указать, что пользователь не сделал никаких предпочтений, известных системе. Поскольку ни один браузер никогда не реализовал его, значение было удалено из спецификации.

Поддержка темного режима

Узнайте, поддерживается ли темный режим браузером

Поскольку темный режим сообщается через медиа-запрос, вы можете легко проверить, поддерживает ли текущий браузер 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 загружается с самым низким приоритетом — Сайт в режиме света загружает CSS Dark Mode с самым низким приоритетом.

Схема загрузки сети, показывающая, как в темноте режим света CSS загружается с самым низким приоритетом — Сайт в темном режиме загружает режим света с самым низким приоритетом.

Схема загрузки сети, показывающая, как в режиме света по умолчанию CSS Dark Mues загружается с самым низким приоритетом — Сайт в режиме света по умолчанию в браузере, который не поддерживает `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

Скриншот `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) работает хорошо.

Перекрасить и темнеть фотографические изображения

Если вы сравните два скриншота ниже, вы заметите, что не только основная тема изменилась от темного на свет на свет на темноте , но и изображение героя выглядит немного по-другому. Мое пользовательское исследование показало, что большинство опрошенных людей предпочитают немного менее динамичные и блестящие изображения, когда темный режим активен. Я называю это повторной колоризацией .

Изображение героя слегка потемнело в темном режиме.

Обычное изображение героя в режиме света.

Повторная цветоризация может быть достигнута с помощью фильтра 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 .

Обратите внимание, как еще раз я :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>

темно-режим, в режиме света. — `<dark-mode-toggle>` в режиме света.

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

Выводы

Работа с темным режимом и поддержка - это весело и открывает новые возможности дизайна. Для некоторых из ваших посетителей это может быть разницей между неспособностью справиться с вашим сайтом и быть счастливым пользователем. Существуют некоторые подводные камни и тщательное тестирование, безусловно, требуется, но Dark Mode, безусловно, является отличной возможностью для вас, чтобы показать, что вы заботитесь обо всех своих пользователях. Лучшие практики, упомянутые в этом посте, и помощники, такие как <dark-mode-toggle> пользовательский элемент, должны проявить вас уверены в вашей способности создавать удивительный опыт темного режима». Дайте мне знать в Твиттере , что вы создаете, и если этот пост был полезным, или также предложения по его улучшению. Спасибо за прочтение! 🌒

Ссылки по теме

Ресурсы для prefers-color-scheme :

Ресурсы для Meta color-scheme Meta Tag и CSS Property:

Общие ссылки на режим темного режима:

Статьи о справочных исследованиях для этого поста:

Благодарности

prefers-color-scheme , свойство CSSSE color-scheme и соответствующая мета теги-это работа внедрения 👏 Rune LilleSveen . Руна также является соредактором модуля CSS Colort Module Spec. Я хотел бы 🙏 поблагодарить Лукаша Збилута , Роуэн Моревуд , Чираг Десаи и Роба Додсона за их тщательные обзоры этой статьи. Стратегия загрузки - детище Джейка Арчибальда . Эмилио Кобос Альварес указал мне на правильный метод обнаружения prefers-color-scheme . Совет с ссылками SVG и currentColor пришел от Тимоти Хэтчер . Наконец, я благодарен многим анонимным участникам различных пользовательских исследований, которые помогли сформировать рекомендации в этой статье. Герой Изображение Натана Андерсона .

предпочитает-цветовую-схему: Привет, тьма, мой старый друг

Введение

Темный режим перед темным режимом

Почему темный режим

Темный режим по эстетическим соображениям

Темный режим как инструмент доступности

Экономия энергии в темном режиме на экранах AMOLED

Активация темного режима в операционной системе

Медиа-запрос prefers-color-scheme

Поддержка темного режима

Выясняем, поддерживается ли темный режим браузером

Изучение предпочтений пользователя во время запроса

Тёмный режим на практике

Стратегия загрузки

Архитектура таблицы стилей

Полный пример

Воздействие нагрузки

Реакция на изменения темного режима

Отладка и тестирование темного режима

Эмуляция prefers-color-scheme в DevTools

Снимки экрана prefers-color-scheme с помощью Puppeteer

Рекомендации по использованию темного режима

Избегайте чисто белого цвета

Изменение цвета и затемнение фотографических изображений

Настройка интенсивности перекрашивания темного режима с помощью JavaScript

Инвертировать векторную графику и значки

Используйте currentColor для встроенных SVG-файлов.

Плавные переходы между режимами

Художественное направление с темным режимом

Темный режим, но добавьте возможность отказа

Пользовательский элемент <dark-mode-toggle>

Выводы

Ссылки по теме

Благодарности

Введение

Темный режим перед темным режимом

Почему темный режим

Темный режим по эстетическим соображениям

Темный режим как инструмент доступности

Экономия энергии в темном режиме на экранах AMOLED

Активация темного режима в операционной системе

Медиа-запрос prefers-color-scheme

Поддержка темного режима

Узнайте, поддерживается ли темный режим браузером

Узнание о предпочтениях пользователя во время запроса

Темный режим на практике

Стратегия загрузки

Стили -лист архитектура

Полный пример

Воздействие погрузки

Реагировать на изменения в темном режиме

Отладка и тестирование темного режима

Эмуляция prefers-color-scheme

Скриншот prefers-color-scheme

Лучшие практики темного режима

Избегайте чистого белого

Перекрасить и темнеть фотографические изображения

Настройка интенсивности повторной цветоризации темного режима с помощью JavaScript

Инвертировать векторную графику и значки

Используйте currentColor для встроенных SVGS

Плавные переходы между режимами

Художественное направление с темным режимом

Темный режим, но добавьте отказа

<dark-mode-toggle> Пользовательский элемент

Выводы

Ссылки по теме

Благодарности

Медиа-запрос `prefers-color-scheme`

Эмуляция `prefers-color-scheme` в DevTools

Снимки экрана `prefers-color-scheme` с помощью Puppeteer

Используйте `currentColor` для встроенных SVG-файлов.

Пользовательский элемент `<dark-mode-toggle>`

Медиа-запрос `prefers-color-scheme`

Эмуляция `prefers-color-scheme`

Скриншот `prefers-color-scheme`

Используйте `currentColor` для встроенных SVGS

`<dark-mode-toggle>` Пользовательский элемент