chore: refactor the code of configuration; 🌟

src/App.vue

@@ -33,21 +33,21 @@ export default {
     lang(val) {
       this.setLanguage(val)
     },
-    theme(val) {
+    'theme.mode': function(val) {
       let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
-      themeUtil.changeThemeColor(this.themeColor, val).then(() => {
+      themeUtil.changeThemeColor(this.theme.color, val).then(() => {
         setTimeout(closeMessage, 1000)
       })
     },
-    themeColor(val) {
+    'theme.color': function(val) {
       let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
-      themeUtil.changeThemeColor(val, this.theme).then(() => {
+      themeUtil.changeThemeColor(val, this.theme.mode).then(() => {
         setTimeout(closeMessage, 1000)
       })
     }
   },
   computed: {
-    ...mapState('setting', ['theme', 'themeColor', 'weekMode', 'lang'])
+    ...mapState('setting', ['theme', 'weekMode', 'lang'])
   },
   methods: {
     setWeekModeTheme(weekMode) {

src/components/setting/Setting.vue

@@ -1,20 +1,29 @@
 <template>
   <div class="side-setting">
     <setting-item :title="$t('theme.title')">
-      <img-checkbox-group @change="values => setTheme(values[0])" :default-values="[theme]">
+      <img-checkbox-group
+        @change="values => setTheme({...theme, mode: values[0]})"
+        :default-values="[theme.mode]"
+      >
         <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
         <img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
         <img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
       </img-checkbox-group>
     </setting-item>
     <setting-item :title="$t('theme.color')">
-      <color-checkbox-group @change="onColorChange" :defaultValues="themeColorIndex" :multiple="false">
+      <color-checkbox-group
-        <color-checkbox v-for="(color, index) in colors" :key="index" :color="color" :value="index" />
+        @change="(values, colors) => setTheme({...theme, color: colors[0]})"
+        :defaultValues="[palettes.indexOf(theme.color)]" :multiple="false"
+      >
+        <color-checkbox v-for="(color, index) in palettes" :key="index" :color="color" :value="index" />
       </color-checkbox-group>
     </setting-item>
     <a-divider/>
     <setting-item :title="$t('navigate.title')">
-      <img-checkbox-group @change="values => setLayout(values[0])" :default-values="[layout]">
+      <img-checkbox-group
+        @change="values => setLayout(values[0])"
+        :default-values="[layout]"
+      >
         <img-checkbox :title="$t('navigate.side')" img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" value="side"/>
         <img-checkbox :title="$t('navigate.head')" img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
       </img-checkbox-group>
@@ -61,8 +70,8 @@
         <a-list-item>
           {{$t('animate.effect')}}
           <a-select
-            v-model="animate"
+            :value="animate.name"
-            @change="val => setAnimation(val)"
+            @change="val => setAnimate({...animate, name: val})"
             class="select-item" size="small" slot="actions"
           >
             <a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{item.alias}}</a-select-option>
@@ -71,8 +80,8 @@
         <a-list-item>
           {{$t('animate.direction')}}
           <a-select
-            v-model="direction"
+            :value="animate.direction"
-            @change="val => setAnimation(this.animate, val)"
+            @change="val => setAnimate({...animate, direction: val})"
             class="select-item" size="small" slot="actions"
           >
             <a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{item}}</a-select-option>
@@ -99,26 +108,20 @@ export default {
   components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem},
   data() {
     return {
-      animate: this.$store.state.setting.animate.name,
-      direction: this.$store.state.setting.animate.direction,
-      colors: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
     }
   },
   computed: {
     directions() {
-      return this.animates.find(item => item.name == this.animate).directions
+      return this.animates.find(item => item.name == this.animate.name).directions
-    },
-    themeColorIndex() {
-      return [this.colors.indexOf(this.themeColor)]
     },
-    ...mapState('setting', ['theme', 'themeColor', 'layout', 'animates', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting'])
+    ...mapState('setting', ['theme', 'layout', 'animate', 'animates', 'palettes', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting'])
   },
-  methods: {
+  watch: {
-    onColorChange (values, colors) {
+    'animate.name': function(val) {
-      if (colors.length > 0) {
+      this.setAnimate({name: val, direction: this.directions[0]})
-        this.setThemeColor(colors[0])
     }
   },
+  methods: {
     copyCode () {
       let clipboard = new Clipboard('#copyBtn')
       const _this = this
@@ -127,13 +130,7 @@ export default {
         clipboard.destroy()
       })
     },
-    setAnimation(animate, direction) {
+    ...mapMutations('setting', ['setTheme', 'setLayout', 'setMultiPage', 'setWeekMode',
-      if (direction == undefined) {
-        this.direction = this.directions[0]
-      }
-      this.setAnimate({name: this.animate, direction: this.direction})
-    },
-    ...mapMutations('setting', ['setTheme', 'setThemeColor', 'setLayout', 'setMultiPage', 'setWeekMode',
       'setFixedSideBar', 'setFixedHeader', 'setAnimate', 'setHideSetting'])
   }
 }

src/components/transition/PageToggleTransition.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-  import {animates} from '@/config/default'
+  import {preset as animates} from '@/config/default/animate.config'
 
   export default {
     name: 'PageToggleTransition',

src/config/config.js

@@ -1,5 +1,11 @@
 // 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
 module.exports = {
-  themeColor: '#13c2c2',
+  theme: {
-  theme: 'night'
+    color: '#13c2c2',
+    mode: 'dark',
+  },
+  animate: {
+    name: 'rotate',
+    direction: 'downLeft'
+  }
 }

src/config/default/admin.config.js

@@ -0,0 +1,18 @@
+// admin 配置
+const ADMIN = {
+  palettes: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
+  animates: require('./animate.config').preset,
+  theme: {
+    mode: {
+      DARK: 'dark',
+      LIGHT: 'light',
+      NIGHT: 'night'
+    }
+  },
+  layout: {
+    SIDE: 'side',
+    HEAD: 'head'
+  }
+}
+
+module.exports = ADMIN

src/config/default/animate.config.js

@@ -0,0 +1,21 @@
+const direct_s = ['left', 'right']
+const direct_1 = ['left', 'right', 'down', 'up']
+const direct_1_b = ['downBig', 'upBig', 'leftBig', 'rightBig']
+const direct_2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft']
+const direct_3 = ['downLeft', 'upRight', 'downRight', 'upLeft']
+
+// animate.css 配置
+const ANIMATE = {
+  preset: [ //预设动画配置
+    {name: 'back', alias: '渐近', directions: direct_1},
+    {name: 'bounce', alias: '弹跳', directions: direct_1.concat('default')},
+    {name: 'fade', alias: '淡化', directions: direct_1.concat(direct_1_b).concat(direct_2).concat('default')},
+    {name: 'flip', alias: '翻转', directions: ['x', 'y']},
+    {name: 'lightSpeed', alias: '光速', directions: direct_s},
+    {name: 'rotate', alias: '旋转', directions: direct_3.concat('default')},
+    {name: 'roll', alias: '翻滚', directions: ['default']},
+    {name: 'zoom', alias: '缩放', directions: direct_1.concat('default')},
+    {name: 'slide', alias: '滑动', directions: direct_1},
+  ]
+}
+module.exports = ANIMATE

src/config/default/animates.js

@@ -1,17 +0,0 @@
-const direct_s = ['left', 'right']
-const direct_1 = ['left', 'right', 'down', 'up']
-const direct_1_b = ['downBig', 'upBig', 'leftBig', 'rightBig']
-const direct_2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft']
-const direct_3 = ['downLeft', 'upRight', 'downRight', 'upLeft']
-
-module.exports = [
-  {name: 'back', alias: '渐近', directions: direct_1},
-  {name: 'bounce', alias: '弹跳', directions: direct_1.concat('default')},
-  {name: 'fade', alias: '淡化', directions: direct_1.concat(direct_1_b).concat(direct_2).concat('default')},
-  {name: 'flip', alias: '翻转', directions: ['x', 'y']},
-  {name: 'lightSpeed', alias: '光速', directions: direct_s},
-  {name: 'rotate', alias: '旋转', directions: direct_3.concat('default')},
-  {name: 'roll', alias: '翻滚', directions: ['default']},
-  {name: 'zoom', alias: '缩放', directions: direct_1.concat('default')},
-  {name: 'slide', alias: '滑动', directions: direct_1},
-]

src/config/default/antd.config.js

@@ -0,0 +1,78 @@
+// antd 配置
+const ANTD = {
+  primary: {
+    color: '#1890ff',
+    light: {
+      menuColors: ['#000c17', '#001529', '#002140']
+    },
+    dark: {
+      menuColors: ['#000c17', '#001529', '#002140']
+    },
+    night: {
+      menuColors: ['#151515', '#1f1f1f', '#1e1e1e'],
+    }
+  },
+  theme: {
+    dark: {
+      'layout-body-background': '#f0f2f5',
+      'body-background': '#fff',
+      'component-background': '#fff',
+      'heading-color': 'rgba(0, 0, 0, 0.85)',
+      'text-color': 'rgba(0, 0, 0, 0.65)',
+      'text-color-inverse': '#fff',
+      'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
+      'shadow-color': 'rgba(0, 0, 0, 0.15)',
+      'border-color-split': '#f0f0f0',
+      'background-color-light': '#fafafa',
+      'background-color-base': '#f5f5f5',
+      'table-selected-row-bg': '#fafafa',
+      'checkbox-check-color': '#fff',
+      'disabled-color': 'rgba(0, 0, 0, 0.25)',
+      'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
+      'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-arrow-color': '#fefefe',
+      'btn-primary-color': '#fff'
+    },
+    light: {
+      'layout-body-background': '#f0f2f5',
+      'body-background': '#fff',
+      'component-background': '#fff',
+      'heading-color': 'rgba(0, 0, 0, 0.85)',
+      'text-color': 'rgba(0, 0, 0, 0.65)',
+      'text-color-inverse': '#fff',
+      'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
+      'shadow-color': 'rgba(0, 0, 0, 0.15)',
+      'border-color-split': '#f0f0f0',
+      'background-color-light': '#fafafa',
+      'background-color-base': '#f5f5f5',
+      'table-selected-row-bg': '#fafafa',
+      'checkbox-check-color': '#fff',
+      'disabled-color': 'rgba(0, 0, 0, 0.25)',
+      'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
+      'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-arrow-color': '#fefefe',
+      'btn-primary-color': '#fff',
+    },
+    night: {
+      'layout-body-background': '#000',
+      'body-background': '#141414',
+      'component-background': '#141414',
+      'heading-color': 'rgba(255, 255, 255, 0.85)',
+      'text-color': 'rgba(255, 255, 255, 0.85)',
+      'text-color-inverse': '#141414',
+      'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
+      'shadow-color': 'rgba(255, 255, 255, 0.15)',
+      'border-color-split': '#303030',
+      'background-color-light': '#ffffff0a',
+      'background-color-base': '#2a2a2a',
+      'table-selected-row-bg': '#ffffff0a',
+      'checkbox-check-color': '#141414',
+      'disabled-color': 'rgba(255, 255, 255, 0.25)',
+      'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
+      'menu-dark-highlight-color': '#fefefe',
+      'menu-dark-arrow-color': '#fefefe',
+      'btn-primary-color': '#141414',
+    }
+  }
+}
+module.exports = ANTD

src/config/default/index.js

@@ -1,5 +1,6 @@
-const animates = require('./animates')
+const ANTD = require('./antd.config')
-const setting = require('./setting')
+const ADMIN = require('./admin.config')
-const theme = require('./theme')
+const ANIMATE = require('./animate.config')
+const setting = require('./setting.config')
 
-module.exports = {setting, animates, theme}
+module.exports = {ANTD, ADMIN, ANIMATE, setting}

src/config/default/setting.config.js

@@ -1,8 +1,10 @@
 // 此配置为系统默认设置，需修改的设置项，在src/config/config.js中添加修改项即可。也可直接在此文件中修改。
 module.exports = {
   lang: 'CN',                           //语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
-  themeColor: '#1890ff',                //主题色
+  theme: {                              //主题
-  theme: 'dark',                        //主题模式，可选 dark 和 light，用于设置导航栏是亮色还是暗色
+    color: '#1890ff',                   //主题色
+    mode: 'dark',                       //主题模式 可选 dark、 light 和 night
+  },
   layout: 'side',                       //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
   fixedHeader: false,                   //固定头部状态栏，true:固定，false:不固定
   fixedSideBar: true,                   //固定侧边栏，true:固定，false:不固定
@@ -12,8 +14,8 @@ module.exports = {
   systemName: 'Vue Antd Admin',         //系统名称
   copyright: '2018 ICZER 工作室出品',    //copyright
   animate: {                            //动画设置
-    name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animates.js
+    name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animate.config.js
-    direction: 'left'                   //动画方向，切换页面时动画的方向，参考 ./animates.js
+    direction: 'left'                   //动画方向，切换页面时动画的方向，参考 ./animate.config.js
   },
   footerLinks: [                        //页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
     {link: 'https://pro.ant.design', name: 'Pro首页'},

src/config/default/theme.js

@@ -1,73 +0,0 @@
-// 主题模式
-const mode = {
-  LIGHT: 'light',
-  DARK: 'dark',
-  NIGHT: 'night',
-}
-// 亮色模式
-const light = {
-  'layout-body-background': '#f0f2f5',
-  'body-background': '#fff',
-  'component-background': '#fff',
-  'heading-color': 'rgba(0, 0, 0, 0.85)',
-  'text-color': 'rgba(0, 0, 0, 0.65)',
-  'text-color-inverse': '#fff',
-  'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
-  'shadow-color': 'rgba(0, 0, 0, 0.15)',
-  'border-color-split': '#f0f0f0',
-  'background-color-light': '#fafafa',
-  'background-color-base': '#f5f5f5',
-  'table-selected-row-bg': '#fafafa',
-  'checkbox-check-color': '#fff',
-  'disabled-color': 'rgba(0, 0, 0, 0.25)',
-  'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
-  'menu-dark-highlight-color': '#fefefe',
-  'menu-dark-arrow-color': '#fefefe',
-  'btn-primary-color': '#fff',
-}
-
-// 暗色模式
-const dark = {
-  'layout-body-background': '#f0f2f5',
-  'body-background': '#fff',
-  'component-background': '#fff',
-  'heading-color': 'rgba(0, 0, 0, 0.85)',
-  'text-color': 'rgba(0, 0, 0, 0.65)',
-  'text-color-inverse': '#fff',
-  'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
-  'shadow-color': 'rgba(0, 0, 0, 0.15)',
-  'border-color-split': '#f0f0f0',
-  'background-color-light': '#fafafa',
-  'background-color-base': '#f5f5f5',
-  'table-selected-row-bg': '#fafafa',
-  'checkbox-check-color': '#fff',
-  'disabled-color': 'rgba(0, 0, 0, 0.25)',
-  'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
-  'menu-dark-highlight-color': '#fefefe',
-  'menu-dark-arrow-color': '#fefefe',
-  'btn-primary-color': '#fff'
-}
-
-// 黑夜模式
-const night = {
-  'layout-body-background': '#000',
-  'body-background': '#141414',
-  'component-background': '#141414',
-  'heading-color': 'rgba(255, 255, 255, 0.85)',
-  'text-color': 'rgba(255, 255, 255, 0.85)',
-  'text-color-inverse': '#141414',
-  'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
-  'shadow-color': 'rgba(255, 255, 255, 0.15)',
-  'border-color-split': '#303030',
-  'background-color-light': '#ffffff0a',
-  'background-color-base': '#2a2a2a',
-  'table-selected-row-bg': '#ffffff0a',
-  'checkbox-check-color': '#141414',
-  'disabled-color': 'rgba(255, 255, 255, 0.25)',
-  'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
-  'menu-dark-highlight-color': '#fefefe',
-  'menu-dark-arrow-color': '#fefefe',
-  'btn-primary-color': '#141414',
-}
-
-module.exports = {light, dark, night, mode}

src/config/index.js

@@ -1,6 +1,6 @@
 const deepmerge = require('deepmerge')
 const _config = require('./config')
-const setting = require('./default').setting
+const {setting} = require('./default')
 const config = deepmerge(setting, _config)
 
 module.exports = config

src/layouts/AdminLayout.vue

@@ -1,9 +1,9 @@
 <template>
   <a-layout :class="['admin-layout', fixedSideBar ? 'fixed-side-bar' : '']">
     <drawer v-if="isMobile" v-model="collapsed">
-      <side-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
+      <side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
-    <side-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
+    <side-menu :theme="theme.mode" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
     <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
       <div class="setting" slot="handler">
         <a-icon :type="showSetting ? 'close' : 'setting'"/>

src/layouts/header/AdminHeader.vue

@@ -56,10 +56,10 @@ export default {
   computed: {
     ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
     headerTheme () {
-      if (this.layout == 'side' && this.theme == 'dark' && !this.isMobile) {
+      if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
         return 'light'
       }
-      return this.theme
+      return this.theme.mode
     },
     langAlias() {
       let lang = this.langList.find(item => item.key == this.lang)

src/store/modules/setting.js

@@ -1,11 +1,13 @@
 import config from '@/config'
+import {ADMIN} from '@/config/default'
 export default {
   namespaced: true,
   state: {
     isMobile: false,
-    animates: require('@/config/default/animates'),
+    animates: ADMIN.animates,
+    palettes: ADMIN.palettes,
+    routesI18n: {},
     ...config,
-    routesI18n: {}
   },
   mutations: {
     setDevice (state, isMobile) {
@@ -23,9 +25,6 @@ export default {
     setAnimate (state, animate) {
       state.animate = animate
     },
-    setThemeColor (state, color) {
-      state.themeColor = color
-    },
     setWeekMode(state, weekMode) {
       state.weekMode = weekMode
     },

src/utils/colors.js

@@ -1,10 +1,8 @@
 const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 const generate =  require('@ant-design/colors/lib/generate').default
-const {theme} = require('../config/default')
+const {ADMIN, ANTD} = require('../config/default')
-const themeMode = theme.mode
 
-// ant design vue 默认主题色
+const themeMode = ADMIN.theme.mode
-const antdPrimary = '#1890ff'
 
 // 获取 ant design 色系
 function getAntdColors(color, mode) {
@@ -15,9 +13,9 @@ function getAntdColors(color, mode) {
 // 获取菜单色系
 function getMenuColors(color, mode) {
   if (mode == themeMode.NIGHT) {
-    return ['#151515', '#1f1f1f', '#1e1e1e']
+    return ANTD.primary.night.menuColors
-  } else if (color == antdPrimary) {
+  } else if (color == ANTD.primary.color) {
-    return ['#000c17', '#001529', '#002140']
+    return ANTD.primary.dark.menuColors
   } else {
     return [varyColor.darken(color, 0.93), varyColor.darken(color, 0.83), varyColor.darken(color, 0.73)]
   }
@@ -33,12 +31,12 @@ function getThemeToggleColors(color, mode) {
   //菜单色系
   const menuColors = getMenuColors(color, mode)
   //内容色系（包含背景色、文字颜色等）
-  const themeCfg = theme[mode]
+  const themeCfg = ANTD.theme[mode]
   let contentColors = Object.keys(themeCfg)
     .map(key => themeCfg[key])
     .map(color => isHex(color) ? color : toNum3(color).join(','))
   // 内容色去重
-  // contentColors = [...new Set(contentColors)]
+  contentColors = [...new Set(contentColors)]
   // rgb 格式的主题色
   let rgbColors = [toNum3(primary).join(',')]
   return {primary, mainColors, subColors, menuColors, contentColors, rgbColors}

src/utils/themeUtil.js

@@ -1,13 +1,13 @@
 const client = require('webpack-theme-color-replacer/client')
-const {theme, themeColor} = require('../config')
+const {theme} = require('../config')
 const {getMenuColors, getAntdColors, getThemeToggleColors} = require('../utils/colors')
-const {theme: themeCfg} = require('../config/default')
+const {ANTD} = require('../config/default')
 
 module.exports = {
   getThemeColors(color, $theme) {
-    const _color = color || themeColor
+    const _color = color || theme.color
-    const _theme = $theme || theme
+    const mode = $theme || theme.mode
-    const replaceColors = getThemeToggleColors(_color, _theme)
+    const replaceColors = getThemeToggleColors(_color, mode)
     const themeColors = [
       ...replaceColors.mainColors,
       ...replaceColors.subColors,
@@ -22,9 +22,9 @@ module.exports = {
     return promise
   },
   modifyVars(color) {
-    let _color = color || themeColor
+    let _color = color || theme.color
-    const palettes = getAntdColors(_color, theme)
+    const palettes = getAntdColors(_color, theme.mode)
-    const menuColors = getMenuColors(_color, theme)
+    const menuColors = getMenuColors(_color, theme.mode)
     const primary = palettes[5]
     return {
       'primary-color': primary,
@@ -45,7 +45,7 @@ module.exports = {
       'menu-dark-submenu-bg': menuColors[0],
       'layout-header-background': menuColors[1],
       'layout-trigger-background': menuColors[2],
-      ...themeCfg[theme]
+      ...ANTD.theme[theme.mode]
     }
   }
 }