support darkmode automatically
rowthan opened this issue · comments
rowthan commented
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.
}