Add a direct theme prop?

[slorber]

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.

import GitHubButton from "react-github-btn";
import useThemeContext from "@theme/hooks/useThemeContext";

const ThemedGithubStarButton = () => {
  // Button theme is choosen according to current Docusaurus theme, not browser preference
  const { isDarkTheme } = useThemeContext();
  const starButtonTheme = isDarkTheme ? "light" : "dark";
  const dataColorSchemeMapping = `no-preference: ${starButtonTheme}; light: ${starButtonTheme}; dark: ${starButtonTheme};`;
  return (
    <GitHubButton
      href="https://github.com/typescript-cheatsheets/react-typescript-cheatsheet"
      data-color-scheme={dataColorSchemeMapping}
      data-size="large"
      data-show-count="true"
      aria-label="Star typescript-cheatsheets/react-typescript-cheatsheet on GitHub"
    >
      Star
    </GitHubButton>
  );
}; 

(more context here: typescript-cheatsheets/react#233)

[slorber]

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"

[ntkme]

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".

[ntkme]

initial user preference stored in the browser

SSR does not know about user preference on the browser side.

[slorber]

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 <#7>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PSNFM2Q5O2M2HD6L53RUPSUXANCNFSM4NP6UAQA> .

[ntkme]

Unfortunately, that is a problem in react:

facebook/react#10591

[ntkme]

Quoted from facebook/react#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.

[Nihat217716]

1e68366a6a8b0092d769f2a056973e08f44520a5