Unable to set default color mode

🐛 Bug report

Unable to force color mode to dark using theme.

💥 Steps to reproduce

1. Open this codesandbox
2. See that the components are in light mode. Expected them to be in dark mode due to configuration of ColorModeScript and extendTheme

💻 Link to reproduction

Codesandbox reproduction

🧐 Expected behavior

Expect components to be in dark mode

🧭 Possible Solution

Not sure.

🌍 System information

Software	Version(s)
Chakra UI	1.0.3
Browser	Chrome Latest (Chromium: 87.0.4280.101)
Operating System	Linux x64

📝 Additional information

None

[ljosberinn]

In your sandbox youre not nesting the config property, but just adding useSystemColorMode etc to the top level, which doesn’t work.

Nesting it within config works as expected.

[TimKolberger]

Can you share a link to the incorrect example? At https://chakra-ui.com/docs/features/color-mode is a valid example listed:

// 1. import `ChakraProvider` component and `extendTheme`
import { extendTheme, ChakraProvider } from "@chakra-ui/react"

// 2. declare your configuration, these are the defaults
const config = {
  useSystemColorMode: false,
  initialColorMode: "light",
}

// 3. extend the theme
const customTheme = extendTheme({ config })

function App() {
  return (
    // 4. pass to `ChakraProvider` as usual
    <ChakraProvider theme={customTheme}>
      <h1>Example</h1>
    </ChakraProvider>
  )
}

The extendTheme function allows adding properties to the theme. It extends the theme - so every property in the default theme should be present plus any additional values you want.