prefers-color-scheme
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
{"* "}Some parts of this feature may have varying levels of support.
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 |
|---|
| Media Queries Level 5 # prefers-color-scheme |
Совместимость с браузерами
Loading…