diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue
index 6f671abe8..607043b75 100644
--- a/docs/.vitepress/theme/components/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/ColorPicker.vue
@@ -196,7 +196,13 @@ const normalizeColorName = (colorName: string) =>
   colorName.slice(1).replaceAll(/-/g, ' ')
 
 onMounted(async () => {
-  // Don't auto-apply color theme - only apply when user explicitly selects
+  // apply saved theme on load
+  if (selectedColor.value) {
+    const theme = generateThemeFromColor(selectedColor.value)
+    themeRegistry[`color-${selectedColor.value}`] = theme
+    await nextTick()
+    setTheme(`color-${selectedColor.value}`)
+  }
   // Wait for next tick to ensure theme handler is fully initialized
   await nextTick()
 })
@@ -260,4 +266,4 @@ const toggleAmoled = () => {
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>