When I implement `ColorModeScript` set to `useSystemColorMode: true` and `initialColorMode: "dark"` it does not seem to be working.

Description

When I implement ColorModeScript set to useSystemColorMode: true and initialColorMode: "dark" it does not seem to be working.

Link to Reproduction

https://github.com/jcstein/buildmarket-lol

Steps to reproduce

1. Go to https://github.com/jcstein/buildmarket-lol
2. Clone the repo
3. Run yarn
4. Run yarn start
5. See error

Chakra UI Version

2.2.1

Browser

Brave/Safari/Firefox

Operating System

• macOS
• Windows
• Linux

Additional Information

https://buildmarket.lol

[itkrt2y]

@jcstein

@chakra-ui/color-mode seems to have changed the behavior of the initial color in v2.0.0 https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Fcolor-mode%402.0.0

If user specifies useSystemColorMode: true, then we’ll subscribe to color mode changes from the operating system. It is no longer used to determine the initial color mode. To achieve that, please use initialColorMode: "system"

Therefore, if you’d like to use the system color as the default color, fix theme as follows.

// src/theme.ts

const config: ThemeConfig = {
-  initialColorMode: "dark",
+  initialColorMode: "system",
  useSystemColorMode: true,
};

And there is a bug in https://github.com/jcstein/buildmarket-lol. You need to pass a custom theme to ChakraProvider instead of the default theme.

// src/App.tsx

import {
  ChakraProvider,
  Box,
  Text,
  Link,
  VStack,
  Code,
  Grid,
-  theme,
  Button,
} from "@chakra-ui/react";
import { ColorModeSwitcher } from "./ColorModeSwitcher";
import { Logo } from "./Logo";
import { FaRobot } from "react-icons/fa";
+ import theme from "./theme";

export const App = () => (
  <ChakraProvider theme={theme}>

[jcstein]

thank you so much! @itkrt2y