Школа
Веб-разработка

Как переключить тему оформления на сайте в зависимости от настройки ОС

14 янв 2021
👁 5093  
Веб-разработка

Как переключить тему оформления на сайте в зависимости от настройки ОС

14 янв 2021
👁 5093  
Юрий Мазурский
Разработчик и дизайнер
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

Веб‑разработка
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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