diff --git a/src/assets/style/theme/list.js b/src/assets/style/theme/list.js
index 2dfcabc6..55173bdd 100644
--- a/src/assets/style/theme/list.js
+++ b/src/assets/style/theme/list.js
@@ -1,29 +1,29 @@
 export default [
   {
-    name: 'd2admin 经典',
-    value: 'd2',
+    title: 'd2admin 经典',
+    name: 'd2',
     preview: 'static/image/theme/d2/preview@2x.png'
   },
   {
-    name: '紫罗兰',
-    value: 'violet',
+    title: '紫罗兰',
+    name: 'violet',
     preview: 'static/image/theme/violet/preview@2x.png'
   },
   {
-    name: '简约线条',
-    value: 'line',
+    title: '简约线条',
+    name: 'line',
     backgroundImage: 'static/image/bg/line-squashed.jpg',
     preview: 'static/image/theme/line/preview@2x.png'
   },
   {
-    name: '流星',
-    value: 'star',
+    title: '流星',
+    name: 'star',
     backgroundImage: 'static/image/bg/star-squashed.jpg',
     preview: 'static/image/theme/star/preview@2x.png'
   },
   {
-    name: 'Tomorrow Night Blue (vsCode)',
-    value: 'tomorrow-night-blue',
+    title: 'Tomorrow Night Blue (vsCode)',
+    name: 'tomorrow-night-blue',
     preview: 'static/image/theme/tomorrow-night-blue/preview@2x.png'
   }
 ]
diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue
index 3a7015de..5be2c48e 100644
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -10,8 +10,8 @@
       <!-- 顶栏 -->
       <el-header class="d2-theme-header">
         <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-          <img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeActive.value}/logo/icon-only.png`">
-          <img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActive.value}/logo/all.png`">
+          <img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.value}/logo/icon-only.png`">
+          <img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.value}/logo/all.png`">
         </div>
         <div class="toggle-aside-btn" @click="collapse = !collapse">
           <d2-icon name="bars"/>
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 export default {
   name: 'd2-layout-main',
   components: {
@@ -77,13 +77,15 @@ export default {
   },
   computed: {
     ...mapState({
-      themeActive: state => state.d2admin.themeActive,
       isGrayMode: state => state.d2admin.isGrayMode
     }),
+    ...mapGetters([
+      'themeActiveSetting'
+    ]),
     styleLayoutMainGroup () {
       return {
-        ...this.themeActive.backgroundImage ? {
-          backgroundImage: `url('${this.$assetsPublicPath}${this.themeActive.backgroundImage}')`
+        ...this.themeActiveSetting.backgroundImage ? {
+          backgroundImage: `url('${this.$assetsPublicPath}${this.themeActiveSetting.backgroundImage}')`
         } : {}
       }
     },
diff --git a/src/components/core/d2-theme-list/index.vue b/src/components/core/d2-theme-list/index.vue
index c46506e0..45ce5426 100644
--- a/src/components/core/d2-theme-list/index.vue
+++ b/src/components/core/d2-theme-list/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-table :data="themeList" v-bind="table">
-    <el-table-column prop="name" align="center" width="160"/>
+    <el-table-column prop="title" align="center" width="160"/>
     <el-table-column label="预览" width="120">
       <div
         slot-scope="scope"
@@ -10,15 +10,15 @@
     </el-table-column>
     <el-table-column prop="address" align="center">
       <template slot-scope="scope">
-        <el-button v-if="themeActive.value === scope.row.value" type="success" icon="el-icon-check" round>已激活</el-button>
-        <el-button v-else round @click="handleSelectTheme(scope.row.value)">使用</el-button>
+        <el-button v-if="themeActiveSetting.name === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
+        <el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
       </template>
     </el-table-column>
   </el-table>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 export default {
   name: 'd2-theme-list',
   data () {
@@ -31,16 +31,18 @@ export default {
   },
   computed: {
     ...mapState({
-      themeList: state => state.d2admin.themeList,
-      themeActive: state => state.d2admin.themeActive
-    })
+      themeList: state => state.d2admin.themeList
+    }),
+    ...mapGetters([
+      'themeActiveSetting'
+    ])
   },
   methods: {
     ...mapMutations([
       'd2adminThemeSet'
     ]),
-    handleSelectTheme (value) {
-      this.d2adminThemeSet(value)
+    handleSelectTheme (name) {
+      this.d2adminThemeSet(name)
     }
   }
 }
diff --git a/src/libs/db.js b/src/libs/db.js
index 869ddd50..8d403104 100644
--- a/src/libs/db.js
+++ b/src/libs/db.js
@@ -5,7 +5,7 @@ const adapter = new LocalStorage('d2admin')
 const db = low(adapter)
 
 db.defaults({
-  themeActive: [],
+  themeActiveName: [],
   pageOpenedList: []
 })
   .write()
diff --git a/src/store/modules/d2admin.js b/src/store/modules/d2admin.js
index 1edf5951..9bf06016 100644
--- a/src/store/modules/d2admin.js
+++ b/src/store/modules/d2admin.js
@@ -10,7 +10,7 @@ export default {
     isGrayMode: false,
     // 主题
     themeList,
-    themeActive: themeList[1],
+    themeActiveName: themeList[0].name, // 这应该是一个名字 不是对象
     // 可以在多页 tab 模式下显示的页面
     tagPool: [],
     // 当前显示的多页面列表
@@ -20,6 +20,15 @@ export default {
     // 当前页面
     pageCurrent: ''
   },
+  getters: {
+    /**
+     * @description 返回当前的主题信息 不是一个名字 而是所有的主题数据
+     * @param {state} state vuex state
+     */
+    themeActiveSetting (state) {
+      return state.themeList.find(theme => theme.name === state.themeActiveName)
+    }
+  },
   mutations: {
     /**
      * @class 通用工具
@@ -198,29 +207,34 @@ export default {
       state.isGrayMode = value
     },
     /**
-     * @class themeActive
+     * @class themeActiveName
      * @description 激活一个主题（应用到dom上）
      * @param {state} state vuex state
      * @param {string} themeValue 需要激活的主题名称
      */
-    d2adminThemeSet (state, themeValue) {
-      // 从列表里找到需要激活的主题的数据
-      const theme = state.themeList.find(e => e.value === themeValue) || state.themeList[0]
-      // 设置 state
-      state.themeActive = theme
+    d2adminThemeSet (state, themeName) {
+      // 检查这个主题在主题列表里是否存在
+      const theme = state.themeList.find(e => e.name === themeName)
+      if (theme) {
+        // 设置 state
+        state.themeActiveName = themeName
+      } else {
+        // 设置为列表第一个主题
+        state.themeActiveName = state.themeList[0].name
+      }
       // 设置 dom
-      document.body.className = `theme-${state.themeActive.value}`
+      document.body.className = `theme-${state.themeActiveName}`
       // 保存到数据库
-      this.commit('d2adminVuex2Db', 'themeActive')
+      this.commit('d2adminVuex2Db', 'themeActiveName')
     },
     /**
-     * @class themeActive
+     * @class themeActiveName
      * @description 从数据库加载主题设置
      * @param {state} state vuex state
      */
     d2adminThemeLoad (state) {
-      const themeActive = db.get('themeActive').find({uuid: util.uuid()}).value()
-      this.commit('d2adminThemeSet', themeActive ? themeActive.value : state.themeList[0].value)
+      const themeActiveName = db.get('themeActiveName').find({uuid: util.uuid()}).value()
+      this.commit('d2adminThemeSet', themeActiveName.value || state.themeList[0].name)
     }
   }
 }