Dark mode detection with MutationObserver API

example.js

const htmlTag = document.querySelector('html')
const checkDarkMode = () => htmlTag.hasAttribute('dark')

const watchDarkMode = (onChange) => {
  let isDark, isDarkBefore

  isDark = checkDarkMode()
  onChange(isDark)
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'dark') {
        isDark = checkDarkMode()
        if (isDarkBefore !== isDark) {
          onChange(isDark)
          isDarkBefore = isDark
        }
      }
    })
  })
  const config = {
    attributes: true,
    childList: false,
    subtree: false,
  }
  observer.observe(htmlTag, config)
}

watchDarkMode((isDark) => {
  // respond to changes here
  console.log(isDark)
})