ColorMode ignoring config set in code and following the setting on other Chakra sites.

[olibpool]

Description

I'm building a webapp but only making use of the "light" colour mode. The problem is that even when setting the "light" mode using the code below:

const extendedTheme = extendTheme({ ...theme, config: { initialColorMode: "light", useSystemColorMode: false, }, });

The colour mode is reverts back to whatever colour mode has been picked on other Chakra UI sites that I've visited due to the shared local state for the color mode.

Link to Reproduction

https://codesandbox.io/p/sandbox/relaxed-jennings-gg58sr?file=%2Fsrc%2Findex.tsx%3A24%2C11

Steps to reproduce

1. Open a Chakra UI website - select dark mode.
2. Open another Chakra UI website.
3. This website will be using the color mode selected on the other website.

Chakra UI Version

2.8.2

Browser

Microsoft Edge

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[CarterMcAlister]

@olibpool I am handling this by setting a custom color mode key for the color mode manager

Example:

import { ChakraProvider, createLocalStorageManager } from '@chakra-ui/react'

export const COLOR_MODE_MANAGER_KEY = 'mysite-color-theme'
const manager = createLocalStorageManager(COLOR_MODE_MANAGER_KEY)

export function ThemeProvider({ children }) {
  return (
    <ChakraProvider colorModeManager={manager}>
      {children}
    </ChakraProvider>
  )
}