CSS-медиавыражение `prefers-color-scheme`

Медиавыражение prefers-color-scheme в CSS используется для определения того, выбрал ли пользователь светлую или тёмную цветовую тему. Пользователь указывает свои предпочтения в настройках операционной системы (например, светлый или тёмный режим) либо в настройках пользовательского агента.

Встроенные элементы

Для 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 цвета меняются на более тёмный вариант. Можно сделать и наоборот.

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

div.box {
  display: inline-block;
  padding: 1em;
  margin: 6px;
  outline: 2px solid black;
  width: 12em;
  height: 2em;
  vertical-align: middle;
}

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

.theme-a {
  background: #ddccaa;
  color: #773311;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #775533;
    color: #ddccbb;
    outline: 5px dashed black;
  }
}

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

.theme-b {
  background: #444477;
  color: #bbbbdd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bbccdd;
    color: #333344;
    outline: 5px dotted black;
  }
}

Результат

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

Унаследованная цветовая схема во встроенных элементах

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

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

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

<div>
  <img alt="circle" src="" />
</div>
<div class="light">
  <img alt="circle" src="" />
</div>
<div class="dark">
  <img alt="circle" src="" />
</div>

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

// Embed an SVG for all <img> elements
for (const img of document.querySelectorAll("img")) {
  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>
  `)}`;
}

Спецификации

Совместимость с браузерами

См. также

• color-scheme — свойство
• <meta name="color-scheme">
• Sec-CH-Prefers-Color-Scheme — HTTP-заголовок подсказки клиента пользовательского агента
• Имитация prefers-color-scheme в Firefox
• Видео: создание тёмного режима для вашего сайта
• Как адаптировать продукт и сайт для тёмного режима
• Изменение цветовых схем в Windows, macOS, Android или других платформах.