Custom theme load after render

[kungfu321]

Bug report 🐞

Custom theme load after render I can see the default color after the custom theme loaded

https://user-images.githubusercontent.com/10558363/110277460-e6308d00-8007-11eb-8b74-70931bc2b072.mov

Version & Environment

• Version of browser: Chrome latest
• Version of geist-ui/react: latest 2.1.3

Expection

function MyApp({ Component, pageProps }) {
  const myTheme = Themes.createFromLight({
    type: "light-theme",
    palette: {
      success: "#78c02a",
      link: "#78c02a",
    },
  });

  return (
    <SWRConfig value={swrConfig}>
      <GeistProvider themes={[myTheme]} themeType="light-theme">
        <CssBaseline />
        <DefaultSeo {...SEO} />
        <Component {...pageProps} />
      </GeistProvider>
    </SWRConfig>
  );
}
export default MyApp;

Actual results (or Errors)

I got an error:

code

[unix]

You can refer to this discussion, which is a problem caused by server-side rendering, avoiding changes by secondary rendering is one of the common practices, but not best practice.

I misunderstood you, the flicker seems to be a problem I can't reproduce, is it related to the way you render? Not sure, can you provide an online minimal replication project? (codesandbox, github codespaces, etc.)

[michaelwschultz]

@unix I'm having the same issue.

To reproduce, visit https://hemolog.com. Code available here https://github.com/michaelwschultz/hemolog.com/blob/main/pages/_app.tsx

[maritz]

One way to work around this is to literally overwrite the default theme.

I've done this by cloning the @geist-ui/core repo, applying my changes there & building, then packaging via npm pack, then overwriting the contents of my projects node_modules/@geist-ui/core with the contents of that pack. To make sure this gets replicated on other installations of my project I used patch-package.

[michaelwschultz]

@maritz thanks for the tip.