Note this is a proof of concept and probably there are corner cases that I haven't considered. https://twitter.com/pacocoursey/status/1249226550756573184

useSystemTheme-singleton.js

let currentTheme = 'light'
const broadcastThemeChangeFunctions = new Set()
let media = null

function listener(media) {
  currentTheme = themes[media.matches ? 'dark' : 'light']
  for (let setTheme of broadcastThemeChangeFunctions) {
    setTheme(currentTheme)
  }
}

function useSystemTheme() {
  const [theme, setTheme] = React.useState(themes[currentTheme])
  React.useEffect(() => {    
    broadcastThemeChangeFunctions.add(setTheme)

    if (!media) { 
      media = window.matchMedia('(prefers-color-scheme: dark)')      
      media.addEventListener(listener)
      listener(media)
    }
    
    return () => {
      broadcastThemeChangeFunctions.delete(setTheme)
      if (broadcastThemeChangeFunctions.size == 0 && media) {
        // remove event listener too
        media = null
      }
    }
  }, [])
  return theme
}