Как я могу определить, использует ли пользователь моего сайта macOS Mojave с темным режимом, используя JavaScript или CSS? Это возможно? Сафари?
Как определить, включен ли темный режим в macOS Mojave на моем веб-сайте?
Ответ 1
Теперь это возможно, поскольку в WebKit добавлена поддержка мультимедийного запроса CSS с prefers-color-scheme
. Вы можете использовать это так:
@media (prefers-color-scheme: dark) {
body { background: black; }
}
Он поставляется в Safari 12.1, и вы можете узнать больше о поддержке Dark Mode в WebKit здесь.
В настоящее время другие основные браузеры не поддерживают этот API, но большинство из них должны в конечном итоге.
Ответ 2
Если вы хотите определить, предпочитает ли пользователь темный режим через JavaScript, вы можете использовать matchMedia
:
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
Поддержка браузера: https://caniuse.com/#feat=prefers-color-scheme