diff --git a/src/ui/provider/index.vue b/src/ui/provider/index.vue
index eef7eba6..86e3c198 100644
--- a/src/ui/provider/index.vue
+++ b/src/ui/provider/index.vue
@@ -11,23 +11,23 @@ if (isSupprotColorMix) {
   document.body.style.setProperty('--el-color-primary', 'hsl(var(--primary))')
   document.body.style.setProperty('--el-color-white', 'hsl(var(--primary-foreground))')
   document.body.style.setProperty('--el-color-black', 'hsl(var(--primary-foreground))')
+  watch(() => settingsStore.currentColorScheme, (val) => {
+    if (val === 'light') {
+      for (let index = 1; index < 10; index++) {
+        document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
+        document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
+      }
+    }
+    else {
+      for (let index = 1; index < 10; index++) {
+        document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
+        document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
+      }
+    }
+  }, {
+    immediate: true,
+  })
 }
-watch(() => settingsStore.currentColorScheme, (val) => {
-  if (val === 'light') {
-    for (let index = 1; index < 10; index++) {
-      document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
-      document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
-    }
-  }
-  else {
-    for (let index = 1; index < 10; index++) {
-      document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
-      document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
-    }
-  }
-}, {
-  immediate: true,
-})
 </script>
 
 <template>