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

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

Thomas Steiner

Введение

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

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

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

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

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

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

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

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

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

Есть также люди, которым действительно нужен темный режим и которые используют его как еще один инструмент доступности, например, пользователи с плохим зрением. Самый ранний экземпляр такого инструмента специальных возможностей, который я смог найти, — это функция CloseView в System 7 , которая имела переключатель «Черное на белом» и «Белое на черном» . Хотя System 7 поддерживала цвет, пользовательский интерфейс по умолчанию по-прежнему оставался черно-белым.

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

Особой формой плохого зрения является компьютерный зрительный синдром, также известный как цифровое напряжение глаз, который определяется как «сочетание проблем со зрением и глазами, связанных с использованием компьютеров (включая настольные компьютеры, ноутбуки и планшеты) и других электронных дисплеев. например, смартфоны и электронные устройства для чтения)». Было высказано предположение , что использование электронных устройств подростками, особенно в ночное время, приводит к повышенному риску сокращения продолжительности сна, увеличения латентного периода засыпания и увеличения дефицита сна. Кроме того, широко известно , что воздействие синего света участвует в регуляции циркадного ритма и цикла сна, а нерегулярное освещение может привести к лишению сна, что может повлиять на настроение и выполнение задач, согласно исследованию Розенфилда . Чтобы ограничить эти негативные эффекты, может помочь уменьшение синего света путем регулировки цветовой температуры дисплея с помощью таких функций, как Night Shift в iOS или Night Light в Android, а также избегание яркого света или неравномерного освещения в целом с помощью темных тем или темных режимов.

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

Наконец, известно, что темный режим экономит много энергии на экранах AMOLED . Тематические исследования Android, посвященные популярным приложениям Google, таким как YouTube, показали, что экономия энергии может достигать 60%. В видеоролике ниже представлена ​​более подробная информация об этих тематических исследованиях и экономии энергии для каждого приложения.

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

Теперь, когда я рассказал, почему темный режим так важен для многих пользователей, давайте рассмотрим, как вы можете его поддерживать.

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

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

Как и любое другое изменение медиа-запроса, на изменения темного режима можно подписаться через 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» предпочитает цветовую схему .

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

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

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

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

Обратите внимание, что я снова инвертирую значки только в 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>

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

Выводы

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

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

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

• Страница состояния платформы Chrome
• Ошибка хрома
• Спецификация медиа-запросов уровня 5

Ресурсы для метатега 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 пришел от Тимоти Хэтчера . Наконец, я благодарен многочисленным анонимным участникам различных исследований пользователей, которые помогли сформировать рекомендации в этой статье. Изображение героя Натана Андерсона .