[Bug] Color mode in local storage not working after navigation or refresh

Description

I set initialColorMode = 'dark'. When I manually selected my preferred color mode to 'light', local storage did remembered my selection; but after a page refresh or navigation, the color mode returned to ‘dark’, although local storage did indicate chakra-ui-color-mode === 'light'.

Link to Reproduction

https://codesandbox.io/s/competent-firefly-obu73s

Steps to reproduce

1. In the code sandbox, toggle color mode to ‘light’ with the button on index page.
2. Now local storage should have an item like ‘chakra-ui-color-mode: light’.
3. Navigate to another page with the link on index page.
4. The color mode returns to ‘dark’.

Chakra UI Version

1.8.8

Browser

Microsoft Edge (100.0.1185.50) (64-bit)

Operating System

• macOS
• Windows
• Linux

Additional Information

When I set breakpoint to watch on every attribute change on html element, I saw the style attr was always --chakra-ui-color-mode:dark, but the data-theme attr switched from ‘light’ to ‘dark’ on the 3rd break.

[aboveyunhai]

@mrcaidev can confirm is a bug related to Chakra with the latest react 18 version. If you revert back to react@17.0.2 react-dom@17.0.2 (the latest v17). Everything should work as expect. Since the newest React version does not significantly improve Chakra UI, I would just recommend you stick with react v17, wait few more minor versions until it’s stable to upgrade or the bug is fixed. You are going to use other packages anyway, all of React-related packages are also facing the same migration issues most likely.

[mrcaidev]

@aboveyunhai Solved! Thanks a lot!