diff --git a/src/App.vue b/src/App.vue
index 070f28ac84..6426347168 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import { updateTheme } from '@ant-design-vue/pro-layout'
+import defaultSettings from '@/config/defaultSettings'
 import { domTitle, setDocumentTitle } from '@/utils/domUtil'
 import { i18nRender } from '@/locales'
 
@@ -23,6 +25,13 @@ export default {
 
       return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale
     }
+  },
+  created () {
+    // first update color
+    // TIPS: THEME COLOR HANDLER!! PLEASE CHECK THAT!!
+    if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
+      updateTheme(defaultSettings.primaryColor)
+    }
   }
 }
 </script>
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index e4fb92e898..424493944f 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { SettingDrawer, updateTheme } from '@ant-design-vue/pro-layout'
+import { SettingDrawer } from '@ant-design-vue/pro-layout'
 import { i18nRender } from '@/locales'
 import { mapState } from 'vuex'
 import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
@@ -133,12 +133,6 @@ export default {
         }, 16)
       })
     }
-
-    // first update color
-    // TIPS: THEME COLOR HANDLER!! PLEASE CHECK THAT!!
-    if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
-      updateTheme(this.settings.primaryColor)
-    }
   },
   methods: {
     i18nRender,