Add a prop to change the color mode key in local storage

Description

The way Chakra persists the color mode in an application is by storing it in the browser’s local storage under the key name chakra-ui-color-mode. It would be great if we could pass a prop to the ColorModeScript component to give a custom key name for storing the color mode.

Problem Statement/Justification

Adding more customizations can help in really personalizing the application. Since the prefix for css variables can be passed as a prop, I feel like changing the color mode key name in the persistent storage can be great addition too.

Proposed Solution or API

Add a property to the ColorModeScriptProps interface.

interface ColorModeScriptProps {
  initialColorMode?: ConfigColorMode;
  nonce?: string;
  storageKeyName?: string;
}

Not sure if the name storageKeyName is the most appropriate, but that is just the idea.

Alternatives

No response

Additional Information

Image of where/how Chakra stores the color mode in the browser.

Additionally, I’d love to make a contribution if this approved!

[segunadebayo]

We now provide a way to customize the storage keys in Chakra UI v2.

• Use the createLocalStorageManager or createCookieStorageManager to create a new storage for the color mode
• Pass the new manager to the ChakraProvider
• If you use ColorModeScript, pass the storageKey prop and set it to the key that matches the step above

const manager = createLocalStorageManager("my-key")

// in root
<ChakraProvider  colorModeManager={manager} />

// in script
<ColorModeScript storageKey="my-key" />

[TimKolberger]

In 1.4+ we added a theme & ColorModeScript prop cssVarPrefix Chakra UI Docs | Theme | Config.

What do you think about a new property on theme & ColorModeScriptProps localStoragePrefix?

const theme = extendTheme({
  config: {
    cssVarPrefix: 'ck',
    // what about 
    localStoragePrefix: 'ck'
  },
})

<ColorModeScript localStoragePrefix="ck" />