Repository: chakra-ui/chakra-ui

Issue #4987: 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)
Created: 2021-11-04T00:35:17Z
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

Install latest Chakra (1.6.12)
Set your system color mode to 'dark'
Wrap something in a <ChakraProvider/>
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

Duplicate issue #4914: Change how Color Mode behaves: allow automatic setting
Created: 2021-10-25T07:07:35Z
Description
I've been digging into the code because I had trouble setting up Color Mode intuitively. In my opinion the following should generally be the default behaviour in 2021:

When a user visits the website for the first time, the system setting should be applied automatically (e.g. dark mode at night).
When the system's color mode changes, all the user's open app windows and websites should be expected to change to the new color mode.
The user may have the ability to lock in a different preferred color mode per website if there is an option for that on the website. This preference should then be persisted.
If the user has locked in a preferred color mode, they should still have the option to revert that back to "automatic". The persisted preference (e.g. in local storage) should then be deleted.

This is how it works on GitHub, https://developer.apple.com, and many other sites. It totally makes sense (to me).

Problem Statement/Justification
To my understanding of the Chakra UI code, this is not possible. I believe there's one central flaw: There is no differentiation between current color mode and user preferred color mode.
Currently, even if the config is set to consider the system's color mode, it may correctly detect the mode, but will then immediately persist that mode to local storage. Later, when the system mode changes, the website's mode will not change, because the previous mode has been persisted and will only ever change when the user click's, for example, the sun or moon button. Unless the user manually deletes the mode in local storage, the mode will never change back to "automatic", which should be the default in the most cases by far.
Proposed Solution or API
setColorMode (of the useColorMode() hook) currently accepts a value of type any. It should accept "light" | "dark" | "system".
localStorageManager should only store the value if it is "light" || "dark" and delete the currently stored value if it is "system".
A key problem is this bit (reference):
if (useSystemColorMode) {
    removeListener = addListener(setColorMode)
}

What happens here: Whenever the system color mode changes, set and persist the mode to local storage – forever.
BTW: I also propose that export const storageKey = "chakra-ui-color-mode" can be customised in the config. It may be an edge case, but some people (like me) will want to integrate the Chakra UI site into only a sub-path of a bigger website (sharing the same domain) and there may be already a preference with a different (neutral) name.
Alternatives
I tried to work around it by implementing my own localStorageManager, however this is not enough as the ColorModeProvider requires some changes.
Additional Information
I'd be happy to assist with the changes, but would like to get feedback on the proposed changes first. Thank you!

Closing comment (2021-11-09T12:37:39Z): Closing this as duplicate of #4987