diff --git a/packages/core/src/colorModes.tsx b/packages/core/src/colorModes.tsx
index 35e2d57a..36549d79 100644
--- a/packages/core/src/colorModes.tsx
+++ b/packages/core/src/colorModes.tsx
@@ -221,10 +221,13 @@ export function useColorModeState(
   // Add mode className
   const customPropertiesEnabled = checkHasCustomPropertiesEnabled(theme)
 
-  const manualSetRef = React.useRef(false)
   const manuallySetMode = React.useCallback((value: string | null) => {
-    manualSetRef.current = true
-    setMode(value)
+    setMode(value || null)
+    if (value) {
+      storage.set(value)
+    } else {
+      storage.clear()
+    }
   }, [])
 
   // Set initial color mode in lazy
@@ -237,17 +240,6 @@ export function useColorModeState(
     }
   }, [])
 
-  // Store mode preference
-  useIsomorphicLayoutEffect(() => {
-    if (manualSetRef.current) {
-      if (mode) {
-        storage.set(mode)
-      } else {
-        storage.clear()
-      }
-    }
-  }, [mode])
-
   // Sync system mode
   useIsomorphicLayoutEffect(() => {
     const storedMode = storage.get()