How do I detect dark mode using JavaScript?

Question

Windows and macOS now have dark mode.

For CSS I can use:

    @media (prefers-dark-interface) { 
      color:          


        

Answer 1

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

To watch for changes:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});