prefers-color-scheme

Для SVG и iframe, prefers-color-scheme позволяет задать стиль CSS для SVG или iframe, основываясь на color-scheme родительского элемента на веб-странице. SVG должны использоваться встроенными (т.е., <img src="circle.svg" alt="circle" />) в отличие от встроенных в HTML. Пример использования prefers-color-scheme в SVG можно найти в разделе "Наследуемая цветовая схема во встроенных элементах".

Использование prefers-color-scheme разрешено в кросс-доменных <svg> и <iframe> элементах. Элементы с разными доменами — это элементы, полученные с другого хоста, чем страница, которая их использует. Чтобы узнать больше об SVG, ознакомьтесь с документацией по SVG, а для получения дополнительной информации об iframe — с документацией по iframe.

light

Указывает, что пользователь предпочитает интерфейс со светлой темой или не выразил активных предпочтений.

dark

Указывает, что пользователь предпочитает интерфейс с тёмной темой.

Распространённым случаем является использование светлой цветовой схемы по умолчанию, а затем использование prefers-color-scheme: dark для переопределения цветов на тёмную вариацию. Также можно поступить наоборот.

Этот пример демонстрирует оба варианта: тема А использует светлые цвета по умолчанию, но может быть переопределена на тёмные цвета. Тема В использует тёмные цвета по умолчанию, но может быть переопределена на светлые цвета. В итоге, если браузер поддерживает prefers-color-scheme, обе темы будут светлыми или тёмными.

HTML

<div class="box theme-a">Theme A (initial)</div>
<div class="box theme-a adaptive">Theme A (changed if dark preferred)</div>
<br />

<div class="box theme-b">Theme B (initial)</div>
<div class="box theme-b adaptive">Theme B (changed if light preferred)</div>

CSS

Тема А (коричневая) использует светлую цветовую схему по умолчанию, но переключается на тёмную схему в зависимости от запроса:

.theme-a {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}

Тема В (синяя) использует тёмную цветовую схему по умолчанию, но переключается на светлую схему в зависимости от запроса:

.theme-b {
  background: #447;
  color: #bbd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bcd;
    color: #334;
    outline: 5px dotted #000;
  }
}

Результат

Левые блоки отображают темы А и В без prefers-color-scheme запроса. Правые блоки показывают те же темы, но одна из них будет изменена на более тёмную или светлую вариацию в зависимости от активной цветовой схемы пользователя. Контур одного блока будет пунктирным или штрихпунктирным, если он был изменён на основе настроек вашего браузера или операционной системы.

Следующий пример демонстрирует, как использовать prefers-color-scheme свойство среды во встроенном элементе для наследования цветовой схемы от родительского элемента. Скрипт используется для установки источника <img> элементов и их атрибутов alt. Обычно это делается в HTML как <img src="circle.svg" alt="circle" />.

Вы должны увидеть три круга, один из которых нарисован в другом цвете. Первый круг наследует color-scheme из ОС и может быть переключён с помощью переключателя темы ОС.

Второй и третий круги наследуют color-scheme от встраивающего элемента; @media запрос позволяет устанавливать стили содержимого SVG на основе color-scheme родительского элемента. В этом случае родительский элемент с color-scheme свойством CSS — это <div>.

<div>
  <img />
</div>

<div style="color-scheme: light">
  <img />
</div>
<div style="color-scheme: dark">
  <img />
</div>

<!-- Embed an SVG for all <img> elements -->
<script>
  for (let img of document.querySelectorAll("img")) {
    img.alt = "circle";
    img.src =
      "data:image/svg+xml;base64," +
      window.btoa(`
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <style>
          :root { color: blue }
          @media (prefers-color-scheme: dark) {
            :root { color: purple }
          }
        </style>
        <circle fill="currentColor" cx="16" cy="16" r="16"/>
      </svg>
    `);
  }
</script>

• color-scheme Свойство CSS
• Sec-CH-Prefers-Color-Scheme HTTP-заголовок Сведения о клиенте пользователя
• Эмулирование prefers-color-scheme в Firefox (Инспектор страниц Firefox > Просмотр и редактирование CSS)
• Видеоурок: Разработка тёмного режима для вашего веб-сайта
• Редизайн вашего продукта и веб-сайта для тёмного режима
• Изменение цветовых схем в Windows, macOS, Android или на других платформах.