diff --git a/src/App.vue b/src/App.vue
index 57e3d2c..8b7bb64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@
 <script>
 import enquireScreen from './utils/device'
 import {mapState} from 'vuex'
+import themeUtil from '@/utils/themeUtil';
 
 export default {
   name: 'App',
@@ -31,10 +32,16 @@ export default {
     },
     lang(val) {
       this.setLanguage(val)
+    },
+    themeColor(val) {
+      let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
+      themeUtil.changeThemeColor(val).then(() => {
+        setTimeout(closeMessage, 1000)
+      })
     }
   },
   computed: {
-    ...mapState('setting', ['weekMode', 'lang'])
+    ...mapState('setting', ['theme', 'themeColor', 'weekMode', 'lang'])
   },
   methods: {
     setWeekModeTheme(weekMode) {
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index 83de32b..ab6b60f 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -84,7 +84,6 @@ import SettingItem from './SettingItem'
 import ColorCheckbox from '../checkbox/ColorCheckbox'
 import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
-import themeUtil from '../../utils/themeUtil'
 import { mapState, mapMutations } from 'vuex'
 
 const ColorCheckboxGroup = ColorCheckbox.Group
@@ -112,12 +111,7 @@ export default {
   methods: {
     onColorChange (values, colors) {
       if (colors.length > 0) {
-        let closeMessage = this.$message.loading(`您选择了主题色 ${colors}, 正在切换...`)
-        let _this = this
-        themeUtil.changeThemeColor(colors[0]).then(() => {
-          _this.setThemeColor(colors[0])
-          closeMessage()
-        })
+        this.setThemeColor(colors[0])
       }
     },
     copyCode () {