prefers-color-scheme

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' в этой спецификации.

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

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

Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
prefers-color-scheme media feature
Экспериментальная
Chrome Полная поддержка 76Edge Нет поддержки НетFirefox Полная поддержка 67IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 12.1WebView Android Полная поддержка 76Chrome Android Полная поддержка 76Firefox Android Полная поддержка 67Opera Android Нет поддержки НетSafari iOS Полная поддержка 13Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

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