[ColorModeProvider] Color mode does not work in production

Describe the bug Switching between dark and light mode is not working in production build.

Expected Behavior After clicking on the color mode switcher button it should be switching theme colors between light and dark.

To Reproduce I am using chakra-ui with gatsby with below mentioned versions: "gatsby": "^2.18.8", "gatsby-plugin-chakra-ui": "^0.1.0",

code <ThemeProvider theme={theme}> <CSSReset /> <ColorModeProvider> <Header siteTitle={data.site.siteMetadata.title} /> <main>{children}</main> <Footer /> </ColorModeProvider> </ThemeProvider>

[KenzoBenzo]

Hey @amolmt & @MykalMachon! I’ve got it working successfully working for Gatsby. The trick is that the root of Gatsby is gatsby-browser.js. So the code I’ve got is:

import React from "react"
import { ThemeProvider, ColorModeProvider, CSSReset } from "@chakra-ui/core"
import theme from "./theme/theme"

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
    <ColorModeProvider>
      <CSSReset />
      {element}
    </ColorModeProvider>
  </ThemeProvider>
)

If you need further reference, my personal portfolio repo is public, here.

[MykalMachon]

Hello @amolmt, I think this is more an issue with Gatsby (specifically, React) than it is with Chakra-UI.

I’ve experienced bugs similar to this one myself when using gatsby. From what I know it has to do with the way Gatsby implements React’s rehydrate method on statically generated pages. You can read more about it here and here.