В некоторых операционных системах можно выбирать тему оформления — тёмную или светлую. С помощью штатных средств ЦСС можно управлять оформлением в зависимости от темы, включённой в операционной системе пользователя.

Для этого есть медиавыражение 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы