Detect Browser Dark Mode in JS & CSS

detectDarkMode.js

// check if browser/os is set to dark mode
function prefersDark() {
  return window.matchMedia('(prefers-color-scheme: dark)').matches
}

// listen for dark mode change in browser/os:
const queryDark = window.matchMedia('(prefers-color-scheme: dark)')
queryDark.addListener(mediaQuery => {
  const prefersDark = mediaQuery.matches
  if (prefersDark) {
    ... switch theme or whatever
  }
})

// css media query:
// @media (prefers-color-scheme: dark) {
//    ... styles for dark
// }


// Compatibility: https://caniuse.com/#feat=prefers-color-scheme