chore: optimize the realization of theme color 🌟

src/utils/colors.js

@@ -1,17 +1,16 @@
-const {generate} = require('@ant-design/colors')
+const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 // ant design vue 默认主题色
 const antPrimaryColor = '#1890ff'
 // ant design vue 默认dark主题色，若主题色为默认主题色则返回此 dark 主题色系
 const antDarkColors = ['#000c17', '#001529', '#002140']
 
-function getDarkColors(color, theme) {
+function getDarkColors(color) {
   if (color == antPrimaryColor) {
     return antDarkColors
   }
-  const lightColors = generate(color, {theme: theme, backgroundColor: '#000000'})
-  const darkColors = generate(lightColors[5], {theme: theme, backgroundColor: '#000000'})
-  let deepDark = darkColors.slice(0, 3)
-  return deepDark
+  const darkColors = []
+  darkColors.push(varyColor.darken(color, 0.93), varyColor.darken(color, 0.83), varyColor.darken(color, 0.73))
+  return darkColors
 }
 
 module.exports = {getDarkColors}

src/utils/themeUtil.js

@@ -1,4 +1,4 @@
-const varyColor = require('webpack-theme-color-replacer/client/varyColor')
+// const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 const client = require('webpack-theme-color-replacer/client')
 const generate =  require('@ant-design/colors/lib/generate').default
 const themeColor = require('../config').themeColor
@@ -7,13 +7,9 @@ const getDarkColors = require('../utils/colors').getDarkColors
 module.exports = {
   primaryColor: themeColor,
   getThemeColors(color) {
-    const lightens = new Array(9).fill().map((t, i) => {
-      return varyColor.lighten(color, i / 10)
-    })
     const palettes = generate(color)
-    const rgb = varyColor.toNum3(color.replace('#', '')).join(',')
-    let darkBgColors = getDarkColors(color, 'dark')
-    return palettes.concat(lightens).concat(rgb).concat(darkBgColors)
+    const darkBgColors = getDarkColors(color)
+    return palettes.concat(darkBgColors)
   },
   changeThemeColor (newColor) {
     let lastColor = this.lastColor || this.primaryColor
@@ -48,5 +44,16 @@ module.exports = {
       default :
         return selector
     }
+  },
+  modifyVars(color) {
+    let darkColors = getDarkColors(color)
+    return {
+      'primary-color': color,
+      'info-color': color,
+      'processing-color': color,
+      'menu-dark-submenu-bg': darkColors[0],
+      'layout-header-background': darkColors[1],
+      'layout-trigger-background': darkColors[2]
+    }
   }
 }