diff --git a/src/layout/header-aside/components/header-color/index.vue b/src/layout/header-aside/components/header-color/index.vue
index e350add3..f3d0d52d 100644
--- a/src/layout/header-aside/components/header-color/index.vue
+++ b/src/layout/header-aside/components/header-color/index.vue
@@ -2,8 +2,9 @@
   <el-color-picker
     class="btn-text can-hover"
     :value="value"
+    :predefine="predefine"
     size="mini"
-    @change="colorSet"/>
+    @change="set"/>
 </template>
 
 <script>
@@ -11,6 +12,19 @@ import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'd2-header-color',
+  data () {
+    return {
+      predefine: [
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585'
+      ]
+    }
+  },
   computed: {
     ...mapState('d2admin/color', [
       'value'
@@ -18,13 +32,13 @@ export default {
   },
   watch: {
     value (value) {
-      this.colorSet(value)
+      this.set(value)
     }
   },
   methods: {
-    ...mapActions({
-      colorSet: 'd2admin/color/set'
-    })
+    ...mapActions('d2admin/color', [
+      'set'
+    ])
   }
 }
 </script>
diff --git a/src/store/modules/d2admin/modules/color.js b/src/store/modules/d2admin/modules/color.js
index 7f308834..6dafc36f 100644
--- a/src/store/modules/d2admin/modules/color.js
+++ b/src/store/modules/d2admin/modules/color.js
@@ -18,7 +18,7 @@ export default {
         // 记录上个值
         const old = state.value
         // store 赋值
-        state.value = color
+        state.value = color || process.env.VUE_APP_ELEMENT_COLOR
         // 持久化
         await dispatch('d2admin/db/set', {
           dbName: 'sys',
diff --git a/vue.config.js b/vue.config.js
index 316e2d13..1e8f91f5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -40,7 +40,7 @@ module.exports = {
         matchColors: [
           ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR) // Element-ui主色系列
         ],
-        externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'], // optional, String or string array. Set external css files (such as cdn css) to extract colors.
+        externalCssFiles: [ './node_modules/element-ui/lib/theme-chalk/index.css' ], // optional, String or string array. Set external css files (such as cdn css) to extract colors.
         changeSelector: forElementUI.changeSelector
       })
     ]