Как определить, включен ли темный режим в macOS Mojave на моем веб-сайте?

Как я могу определить, использует ли пользователь моего сайта macOS Mojave с темным режимом, используя JavaScript или CSS? Это возможно? Сафари?

Ответы

Теперь это возможно, поскольку в WebKit добавлена поддержка мультимедийного запроса CSS с prefers-color-scheme. Вы можете использовать это так:

@media (prefers-color-scheme: dark) { 
    body { background: black; }
}

Он поставляется в Safari 12.1, и вы можете узнать больше о поддержке Dark Mode в WebKit здесь.

В настоящее время другие основные браузеры не поддерживают этот API, но большинство из них должны в конечном итоге.

Если вы хотите определить, предпочитает ли пользователь темный режим через JavaScript, вы можете использовать matchMedia:

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches