[ColorModeProvider] Does not re-render when value prop changes

Describe the bug If you choose to manually provide the color mode value to ColorModeProvider, it does not re-render when the value prop changes

Expected Behavior It should rerender child components with the new color mode

To Reproduce https://codesandbox.io/s/chakra-ui-color-mode-bug-xfzv9

A temporary workaround is to also add a key prop of the color mode value, but this unmounts all children when it changes, so it’s not ideal.

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version: 81

[mattjennings]

I see, I would still expect the value prop to change the state value, though. Syncing that value to the state would be the best solution.

The reason I was providing the value myself was to workaround issues #305, #349, and #511. It worked properly when I did either the key prop or custom ColorModeProvider workaround. I do wonder if those issues may be symptoms of this issue.

[segunadebayo]

Let me know if you need any further help and I’ll reopen this.

We’ll also consider syncing the value prop of ColorModeProvider with state so this usage works. Thinking about @bear-in-a-box comment on electron.