Использование тёмной темы CSS c MacOS Mojave
Очередная версия MacOS Mojave получила поддержку тёмной темы(Dark Mode).
Эта опция позволяет включить тёмный интерфейс во всей операционной системе, что очень полезно при работе вечером и ночью. Все системные приложения, по умолчанию, подстраиваются под этот стиль интерфейса.
Но что на счёт веб-приложений? Safari 12 в составе Mojave не может определить включен ли у пользователя тёмный интерфейс или нет.
Хорошие новости: в Safari Tech Preview 68 добавили поддержку тёмной темы! И в Safari 12.1 может также появиться поддержка через несколько месяцев.
Простой CSS код:
/* цвет текста для светлой темы */
body {
color: #333;
}
/* цвет текста и фона для тёмной темы */
@media (prefers-color-scheme: dark) {
body {
color: #ddd;
background-color: #222;
}
}
Медиа запрос prefers-color-scheme поддерживает три значения: dark, light и no-preference.
Дополнительные библиотеки не требуются. Код медиа запроса будет пропущен, если браузер его не поддерживает.
Вызывая JS функцию:
window.matchMedia('(prefers-color-scheme: dark)')
браузер сделает всё самостоятельно.
В качестве примера откройте данную страницу в Safari Tech Preview с включенной тёмной темой в MacOS. iOS и Chrome вероятнее всего также получат поддержку тёмной темы в следующих, крупных обновлениях.
Источник: https://paulmillr.com/posts/using-dark-mode-in-css/
Комментарии {2}