javascriptcssmacossafarimacos-mojave

How can I detect if Dark Mode is enabled in macOS Mojave on my website?

How can I detect if the user of my website is using macOS Mojave with Dark Mode enabled using JavaScript or CSS? Is this possible? Safari?

Solution

  • This is now possible as WebKit has added support for the prefers-color-scheme CSS media query. You can use it like so:

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

    Or in JavaScript:

    function isDarkModeEnabled() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}

    Read more about Dark Mode Support in WebKit. This is available as of Safari 12.1, see Can I use... for the latest info on browser support.