Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS медиа функция prefers-color-scheme может использоваться для определения того, светлую или темную тему используется пользователь в операционной системе.

Синтаксис

no-preference
Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как false в логическом контексте.
light
Указывает, что пользователь выбрал светлую тему в операционной системе.
dark
Указывает, что пользователь выбрал темную тему в операционной системе.

Примеры

В этом примере используется элемент с черным фоном и белым текстом, если пользователь выбрал светлую тему в операционной системе, то цвета будут инвертированы.

HTML

<div class="themed">Theme</div>

CSS

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

Result

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

Specification Status Comment

Media Queries Level 5
Определение 'prefers-color-scheme' в этой спецификации.

Редакторский черновик Изначальное определение.

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

Данные о совместимости отсутствуют.

Смотрите также

 

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, nikolai-shabalin
Обновлялась последний раз: mdnwebdocs-bot,