Загрузка...CSS prefers-color-scheme это медиа-запрос, который определяет выбранную в предпочтениях пользователя настройку темы операционной системы.
@media (prefers-color-scheme: dark) {
.element {
background: black;
color: white;
}
}У медиа-запроса prefers-color-circuit есть несколько значений, которые можно указать: светлое light и темное dark. Они позволяют настроить тему страницы с помощью CSS в зависимости от предпочтений пользователя.
light: указывает, что пользователь уведомил систему о том, что он предпочитает страницу со светлой темой (темный текст на светлом фоне).
dark: означает, что пользователь уведомил систему о том, что он предпочитает страницу с темной темой (светлый текст на темном фоне).
/* Light mode */
@media (prefers-color-scheme: light) {
.element {
background: white;
color: black;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.element {
background: black;
color: white;
}
}На случай, когда у пользователя нет предпочтений, следует использовать вариант с prefers-color-scheme: no-preference, чтобы добавить на страницу тему «по умолчанию».
Поддержка браузерами — с этим — нормально, все современные, кроме совсем маргинальных.