support darkmode automatically

[rowthan]

trafficstars

react-notion-x render dark-mode by a property named darkMode. if i want set light\dark mode automatically by browser behavior from window.matchMedia('(prefers-color-scheme: dark)').matches. i should managed it by a state:

const [dark, setDark] = useState<boolean>(true)
  useEffect(function () {
    const darkMode =
      window?.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    setDark(darkMode)
  }, [])

The result is that light-mode will be render at first time, and then the dark-mode view will be rendered Immediately followed. I think it's a bad case for users extremely in deep-night.

So, why not set the default css variable by media-query and use the darkMode property to override it. like this:

:root{
  --bg-color: white;
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg-color: black;
  }
}

.notion.dark-mode{
    --bg-color: black;
}

.notion.dark-light{
  --bg-color: white;
}

{
  darkMode: true |  false  |  "auto" //  add an `auto` property to prevent flashing at first paint.
}