1.0.0-rc.5 refuses to start in dark mode inside of Storybook

Bug report

Chakra-ui 1.0.0-rc.5 seems to be ignoring:

• theme.config.initialColorMode set to dark
• <ChakraProvider>'s initialColorMode property set to dark

Even tough i set initialColorMode to dark on my theme or ChakraProvider mode to dark on my theme Chakra seems to be overwriting the colorMode with an empty string.

The theme used in this example was downloaded from chakra-ui repository.

To reproduce

I have created a repository with only storybook and chakra-ui 1.0.0-rc.5

git clone https://github.com/hems/chakra-storybook-problem
cd chakra-storybook-problem
y install
y storybook

Once storybook is open, check the console and you will see the following console logs:

First one is provided by the ChakraProvider decorator on Storybook, you can see it on this file on line 16

export const Chakra = ({ children }) => {
  console.log("theme.config ->", newTheme.config)
  
  return (
    <ChakraProvider CSSReset theme={newTheme} initialColorMode="dark">
      <Box p={5}>
        {children}
      </Box>
    </ChakraProvider>
  )
}

The two other logs are useColorMode hook crated on this component

const Welcome = ({showApp}) => {
  const { colorMode } = useColorMode();

  console.log('got colormode ->', colorMode)

  return (
    <>
      <Box>
        This is a custom welcome message using Chakra UI
      </Box>
      <Link onClick={showApp} color="teal.500">
        Let's go to see the button
      </Link>
    </>
  )
}

Expected behavior

Chakra component to be rendered using dark theme, no the light theme

Screenshots

Additional context

• I have noted in a previous RC version that there was a localStorage value called ui-color-theme or similar and a second render was happening with such value, but on this RC-5 version i can’t find that variable and i’m not sure if that’s somehow related.

• wrapping the component with <DarkMode> doesn’t seem to work as well.

• Navigating to another button on the storybook and then coming back to the original story will show two renders, one with dark mode and another with light mode right after, which i believe demonstrates Chakra is override the colorMode at some point?

[ljosberinn]

No worries, glad it worked out 😃 personally wasn’t aware of that file either. Good to know!

[hems]

Turns out what solved my issue was adding the preview-head.html copied from the Chakra storybook.

( :

And apologies about the extra props on the ChakraProvider, that was me naively trying some props that showed up on my auto complete.