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

According to MediaQueryList - Web APIs | MDN, addListener is the correct way to listen to the change. addEventListener is not working for me on iOS 13.4.

window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
  console.log(`changed to ${e.matches ? "dark" : "light"} mode`)
});