fix: drive kit color mode from darkMode prop, ignore localStorage#613
Merged
Conversation
Chakra v2's ColorModeProvider inside the kit reads localStorage["chakra-ui-color-mode"] in a mount-time effect and overwrites its internal state with that stale value, ignoring the `darkMode` prop. The old ColorModeSync compared the *initial* colorMode against the target before Chakra's effect ran, so it never corrected the drift. React 19 / Next.js 16 strict mode makes this race deterministic — light mode is now permanently broken in hosts that previously rendered the kit in dark mode. Replace ColorModeScript + ColorModeSync with a custom colorModeManager that always reports the current darkMode prop and no-ops writes. Recreating the manager when darkMode changes re-triggers Chakra's read effect, so the internal color mode now tracks the prop without ever touching localStorage. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughThis PR refactors Chakra color-mode handling in ChangesTheme Color-Mode Unification
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
🚀 Preview environment deployed! |
Contributor
|
Size Change: +56 B (0%) Total Size: 8.47 MB
ℹ️ View Unchanged
|
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ColorModeProviderinside the kit readslocalStorage["chakra-ui-color-mode"]in a mount-time effect and overwrites its internal state with that stale value, ignoring thedarkModeprop. The oldColorModeSynccompared the initialcolorModeagainst the target before Chakra's effect ran, so it never corrected the drift.ColorModeScript+ColorModeSyncwith a customcolorModeManagerpassed toChakraProviderthat always reports the currentdarkModeprop value and no-ops writes. The manager's identity is keyed ondarkMode, so a flip re-triggers Chakra's read effect and the internal color mode tracks the prop without ever touchinglocalStorage.Closes #608
Summary by CodeRabbit
Release Notes
Refactor
Breaking Changes