From b6077998360d9461f7a95378ba6689807c31b3e7 Mon Sep 17 00:00:00 2001
From: land <navaneethbinoy@gmail.com>
Date: Mon, 3 Nov 2025 14:45:59 +0530
Subject: [PATCH] Update ColorPicker.vue

---
 .../theme/components/ColorPicker.vue          | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue
index 8c58d0651..4edab11fc 100644
--- a/docs/.vitepress/theme/components/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/ColorPicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { colors } from '@fmhy/colors'
 import { useStorage, useStyleTag } from '@vueuse/core'
-import { watch, onMounted } from 'vue'
+import { watch, onMounted, nextTick } from 'vue'
 import amoledswitch from './amoledswitch.vue'
 
 const colorScales = [
@@ -91,13 +91,19 @@ const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
   `
 }
 
-onMounted(() => {
-  if (isAmoledMode.value) {
-    document.documentElement.classList.add('theme-amoled')
-  }
+onMounted(async () => {
+  // Wait for next tick to ensure DOM is ready
+  await nextTick()
   
-  // Re-apply the theme to ensure everything is initialized
-  updateThemeColor(selectedColor.value, isAmoledMode.value)
+  // Small delay to ensure VitePress dark mode is initialized
+  setTimeout(() => {
+    if (isAmoledMode.value) {
+      document.documentElement.classList.add('theme-amoled')
+    }
+    
+    // Force re-apply the theme
+    updateThemeColor(selectedColor.value, isAmoledMode.value)
+  }, 100)
 })
 
 watch([selectedColor, isAmoledMode], ([color, amoled]) => {