Closed slorber closed 4 years ago
Also it does not seem to work so great with SSR / hydration. My mapping clearly ask for "white" theme, yet in mount it's actually "dark"
If you update the underneath dependency github-buttons
to the just released 2.11.0
, you can just specify data-color-scheme="light"
or data-color-scheme="dark"
.
initial user preference stored in the browser
SSR does not know about user preference on the browser side.
Thanks
That's true but the browser preference should be applied after hydration no?
Even if I try to force the light theme, the button remains dark after client hydration.
I think it would be better to set the right theme after hydration, even if it could lead to a flash of bad theme at hydration time at least we have the correct color in the end
Le lun. 1 juin 2020 à 19:47, なつき notifications@github.com a écrit :
Closed #7 https://github.com/ntkme/react-github-btn/issues/7.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ntkme/react-github-btn/issues/7#event-3394213768, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFW6PSNFM2Q5O2M2HD6L53RUPSUXANCNFSM4NP6UAQA .
Unfortunately, that is a problem in react:
Quoted from https://github.com/facebook/react/issues/10591:
React does not introduce any differences on its own, whether in text content, anchor tags, or anywhere else.
But if your components return different things on client and server, React won't attempt to fix the difference.
You are expected to return the same thing on the client and the server. Otherwise it's a bug in your app. React warns you about mismatches in development, and you should fix if you see any.
1e68366a6a8b0092d769f2a056973e08f44520a5
Hi,
I added this button to a React SPA with a dark mode toggle (Docusaurus v2). The button theme should change when the theme is toggled, and we should "decorelate" to the initial user preferenced stored in the browser.
This leads to unnatural integration where I have to provide a "mapping", while I know exactly which theme for the button I want.
(more context here: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/233)