В некоторых операционных системах можно выбирать тему оформления — тёмную или светлую. С помощью штатных средств ЦСС можно управлять оформлением в зависимости от темы, включённой в операционной системе пользователя.
Для этого есть медиавыражение prefers-color-scheme. У него может быть два значения — dark и light. Все стили внутри блока выражения применяются только при включённой соответствующей теме:
@media (prefers-color-scheme: light) {
.rectangle {
color: #000;
background-color: #eee;
}
}
@media (prefers-color-scheme: dark) {
.rectangle {
color: #eee;
background-color: #555;
}
}При включённой светлой теме оформления фон будет светлым, а текст — тёмным. С тёмной темой — наоборот.
Выражение prefers-color-scheme поддерживается во всех популярных браузерах, кроме Интернет Эксплорера.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.