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

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

Thomas Steiner

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запрос медиафайла prefers-color-scheme

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

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

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

Давайте наконец посмотрим, как на практике выглядит поддержка темного режима. Как и в случае с «Горцем» , в темном режиме может быть только один вариант : темный или светлый, но никогда оба одновременно! Почему я об этом упоминаю? Потому что этот факт должен влиять на стратегию загрузки. Пожалуйста, не заставляйте пользователей загружать 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. Это можно использовать, например, для динамического изменения значка сайта (favicon ) или изменения параметра <meta name="theme-color"> , определяющего цвет адресной строки в 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 theme color. Будет выбран первый совпадающий цвет. Например, у вас может быть один цвет для светлого режима и другой для темного. На момент написания этой статьи определить их в манифесте невозможно. См. проблему 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 теперь можно эмулировать предпочтительную цветовую схему пользователя таким образом, чтобы это влияло только на текущую видимую вкладку. Откройте командное меню , начните вводить Rendering , выполните команду Show Rendering , а затем измените параметр «Emulate CSS media feature prefers-color-scheme» .

Создание скриншотов 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, то его значение будет взято из унаследованного значения свойства `color`. Ещё лучше: это также работает для <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>

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

Переключение из темного режима в светлый или наоборот можно сгладить благодаря тому, что свойства CSS color и background-color позволяют анимировать переходы. Создать анимацию очень просто: достаточно объявить два 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
• Ошибка Chromium
• Спецификация «Медиа-запросы, уровень 5»

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

• Свойство CSS color-scheme и метатег
• Страница состояния платформы Chrome
• Ошибка Chromium
• Спецификация модуля настройки цвета CSS, уровень 1.
• В репозитории CSS WG на GitHub есть проблема, связанная с метатегом и свойством CSS.
• Проблема на GitHub, связанная с метатегом HTML WHATWG.

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

• Материальный дизайн — Темная тема
• Темный режим в веб-инспекторе
• Поддержка темного режима в WebKit
• Рекомендации Apple по проектированию пользовательского интерфейса — Темный режим

Статьи, использованные в качестве справочного материала для этой публикации:

• Что на самом деле делает функция «поддерживаемые цветовые схемы» в темном режиме? 🤔
• Да воцарится тьма! 🌚 Возможно…
• Изменение цвета для темного режима

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

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