Skip to content

Commit ab5ed55

Browse files
committed
fix(color-mode): use lazy init to solve SSR issue
1 parent be8b85b commit ab5ed55

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

packages/core/src/colorModes.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,8 +149,7 @@ export function useColorModeState(theme, { target } = {}) {
149149
const initialColorMode = getInitialColorModeName(theme)
150150
const [mode, setMode] = React.useState(() => {
151151
if (!hasColorModes(theme)) return null
152-
const storedMode = storage.get()
153-
return storedMode || systemMode || defaultColorMode
152+
return defaultColorMode
154153
})
155154

156155
// Add mode className
@@ -162,6 +161,16 @@ export function useColorModeState(theme, { target } = {}) {
162161
setMode(value)
163162
}, [])
164163

164+
// Set initial color mode in lazy
165+
useIsomorphicLayoutEffect(() => {
166+
if (!hasColorModes(theme)) return
167+
const storedMode = storage.get()
168+
const initialMode = storedMode || systemMode || defaultColorMode
169+
if (mode !== initialMode) {
170+
setMode(storedMode || systemMode || defaultColorMode)
171+
}
172+
}, [])
173+
165174
// Store mode preference
166175
useIsomorphicLayoutEffect(() => {
167176
if (manualSetRef.current) {

0 commit comments

Comments
 (0)