prefers-color-scheme

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

Синтаксис

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

Примеры

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

HTML

<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>

CSS

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

Result

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

Specification Status Comment

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

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

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

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

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

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