Add class=dark to document root when using dark theme

[pleasantone]

This does nothing for bootstrap, which is already using data-bs-theme, but it is a nice signal to third-party code that we may want to integrate such as the add to calendar button lightMode which looks for generic theme hints.

thoughts?

[razonyang]

You can retrieve the current theme from localStorage and listen the theme changing event.

  const theme = localStorage.getItem('hb-theme')
  if (theme === 'dark' || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    // handle dark theme
  }

  document.addEventListener('hb:theme', (e) => {
    console.log(e.detail.theme === 'dark' ? 'dark' : 'light')
  })

Add class=dark to document root

I don't think it is generic/good solution, such as Mermaid theme, Giscus comments theme, they don't reply on those attributes, so I'd leave it as a duty of specified module.

[pleasantone]

Much better solution! Thanks!