diff --git a/frontend/src/business/App.vue b/frontend/src/business/App.vue
index a03bda8a6d..b2efe68a1b 100644
--- a/frontend/src/business/App.vue
+++ b/frontend/src/business/App.vue
@@ -62,6 +62,7 @@ export default {
       this.$get('/system/theme', res => {
         this.color = res.data ? res.data : ORIGIN_COLOR;
         setColor(this.color, this.color, this.color, this.color);
+        this.$store.commit('setTheme', res.data);
       })
     }
     if (localStorage.getItem("store")) {
diff --git a/frontend/src/business/components/common/head/HeaderLabelOperate.vue b/frontend/src/business/components/common/head/HeaderLabelOperate.vue
index 66c9f275fd..b5764b6ea6 100644
--- a/frontend/src/business/components/common/head/HeaderLabelOperate.vue
+++ b/frontend/src/business/components/common/head/HeaderLabelOperate.vue
@@ -2,7 +2,7 @@
   <div>
     <template>
             <span>{{ $t('commons.operating') }}
-             <i class='el-icon-setting' style="color:#7834c1; margin-left:10px" @click="customHeader"> </i>
+             <i class='el-icon-setting operator-color' @click="customHeader"> </i>
             </span>
     </template>
   </div>
@@ -21,5 +21,8 @@ export default {
 </script>
 
 <style scoped>
-
+.operator-color {
+  color: var(--count_number);
+  margin-left:10px;
+}
 </style>
diff --git a/frontend/src/business/components/track/home/TrackHome.vue b/frontend/src/business/components/track/home/TrackHome.vue
index 1f0b14b7e8..084aff62dd 100644
--- a/frontend/src/business/components/track/home/TrackHome.vue
+++ b/frontend/src/business/components/track/home/TrackHome.vue
@@ -169,7 +169,7 @@ export default {
           type: 'bar',
           itemStyle: {
             normal: {
-              color: COUNT_NUMBER
+              color: this.$store.state.theme.theme ? this.$store.state.theme.theme : COUNT_NUMBER
             }
           }
         },
@@ -179,7 +179,7 @@ export default {
             type: 'bar',
             itemStyle: {
               normal: {
-                color: COUNT_NUMBER_SHALLOW
+                color: this.$store.state.theme.theme ? this.$store.state.theme.theme : COUNT_NUMBER_SHALLOW
               }
             }
           }]
diff --git a/frontend/src/business/store.js b/frontend/src/business/store.js
index c536ea0d38..4fbb5d7f17 100644
--- a/frontend/src/business/store.js
+++ b/frontend/src/business/store.js
@@ -50,11 +50,23 @@ const IsReadOnly = {
   }
 }
 
+const Theme = {
+  state: {
+    theme: undefined
+  },
+  mutations: {
+    setTheme(state, value) {
+      state.theme = value;
+    }
+  }
+}
+
 export default new Vuex.Store({
   modules: {
     api: API,
     common: Common,
     switch: Switch,
     isReadOnly: IsReadOnly,
+    theme: Theme
   }
 })