Chakra 1.6.12 now features color mode issues (now dark by default, even though docs promise light by default. Also, overrides appear not to work)

Description

Docs tell me that Chakra will be light color mode: https://chakra-ui.com/docs/features/color-mode#setup, but the default is your system color mode. Overrides appear to not work

Link to Reproduction

https://codesandbox.io/s/dank-cloud-rymzh?file=/src/App.tsx

Steps to reproduce

1. Install latest Chakra (1.6.12)
2. Set your system color mode to ‘dark’
3. Wrap something in a <ChakraProvider/>
4. Notice that it is all black now, instead of light:

Even if you set:

const config = {
  initialColorMode: "light",
  useSystemColorMode: false,
}

this now does not override the color mode. It always takes your system color mode

Chakra UI Version

1.6.12

Browser

All

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[stefvw93]

For people who can’t wait for the next release for some reason, I temporarily solved it like this:

function ForceLightMode(props: { children: JSX.Element }) {
  const { colorMode, toggleColorMode } = useColorMode();

  useEffect(() => {
    if (colorMode === "light") return;
    toggleColorMode();
  }, [colorMode]);

  return props.children;
}

export function App() {
  return (
    <ChakraProvider theme={theme}>
      <ForceLightMode>
        ...
      </ForceLightMode>
    </ChakraProvider>
  );
}

[jnsdls]

yep, same issues here, worked around it for now by explicitly wrapping the app with a <LightMode> (directly after the provider) - since I only want light mode for right now

EDIT: actually that led to other issues, the real “fix” I’m applying now is to just resolve @chakra-ui/color-mode to a version smaller than in my package.json

"resolutions": {
    "@chakra-ui/color-mode": "<1.2.0"
  }