feat: add global night mode; 🌟

新增：全局夜晚模式；

src/utils/colors.js

@@ -3,8 +3,13 @@ const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 const antPrimaryColor = '#1890ff'
 // ant design vue 默认dark主题色，若主题色为默认主题色则返回此 dark 主题色系
 const antDarkColors = ['#000c17', '#001529', '#002140']
+const nightColors = ['#151515', '#1f1f1f', '#1f1f1f']
 
-function getDarkColors(color) {
+
+function getDarkColors(color, theme) {
+  if (theme == 'night') {
+    return nightColors
+  }
   if (color == antPrimaryColor) {
     return antDarkColors
   }
@@ -13,4 +18,37 @@ function getDarkColors(color) {
   return darkColors
 }
 
-module.exports = {getDarkColors}
+function getBgColors(theme) {
+  return theme == 'light' ? ['#f0f2f5', '#ffffff'] : ['#000000', '#141414']
+}
+
+function toNum3(color) {
+  if (isHex(color)) {
+    return varyColor.toNum3(color)
+  }
+  let colorStr = ''
+  if (isRgb(color)) {
+    colorStr = color.slice(5, color.length)
+  } else if (isRgba(color)) {
+    colorStr = color.slice(6, color.lastIndexOf(','))
+  }
+  let rgb = colorStr.split(',')
+  const r = parseInt(rgb[0])
+  const g = parseInt(rgb[1])
+  const b = parseInt(rgb[2])
+  return [r, g, b]
+}
+
+function isHex(color) {
+  return color.length >= 4 && color[0] == '#'
+}
+
+function isRgb(color) {
+  return color.length >= 10 && color.slice(0, 3) == 'rgb'
+}
+
+function isRgba(color) {
+  return color.length >= 13 && color.slice(0, 4) == 'rgba'
+}
+
+module.exports = {getDarkColors, getBgColors, isHex, isRgb, isRgba, toNum3}

src/utils/themeUtil.js

@@ -1,39 +1,44 @@
 // 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
-const getDarkColors = require('../utils/colors').getDarkColors
+const {theme, themeColor} = require('../config')
+const {getDarkColors, isHex, toNum3} = require('../utils/colors')
+const themeCfg = require('../config/default').theme
 
 module.exports = {
   primaryColor: themeColor,
-  getThemeColors(color) {
-    const palettes = generate(color)
-    const darkBgColors = getDarkColors(color)
-    return palettes.concat(darkBgColors)
+  getThemeColors(color, $theme) {
+    let _theme = $theme || theme
+    let opts = (_theme == 'night') ? {theme: 'dark'} : undefined
+    let palettes = generate(color, opts)
+    const primary = palettes[5]
+    palettes = palettes.concat(generate(primary))
+    console.log(palettes)
+    const darkBgColors = getDarkColors(color, _theme)
+    const _themeCfg = themeCfg[_theme]
+    const bgColors = Object.keys(_themeCfg)
+      .map(key => _themeCfg[key])
+      .map(color => isHex(color) ? color : toNum3(color).join(','))
+    let rgb = toNum3(primary).join(',')
+    return palettes.concat(darkBgColors).concat(bgColors).concat(rgb)
   },
-  changeThemeColor (newColor) {
-    let lastColor = this.lastColor || this.primaryColor
+  changeThemeColor (newColor, $theme) {
     let options = {
-      oldColors: this.getThemeColors(lastColor),
-      newColors: this.getThemeColors(newColor)
+      newColors: this.getThemeColors(newColor, $theme)
     }
     let promise = client.changer.changeColor(options)
-    this.lastColor = lastColor
     return promise
   },
   changeSelector (selector) {
     switch (selector) {
       case '.ant-layout-sider':
         return '.ant-layout-sider-dark'
-      case '.ant-calendar-today .ant-calendar-date':
-        return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
-      case '.ant-btn:focus,.ant-btn:hover':
-        return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
-      case '.ant-btn.active,.ant-btn:active':
-        return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
-      case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
-      case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
-        return ':not(.ant-steps-item-process)' + selector
+      case '.ant-menu-dark .ant-menu-inline.ant-menu-sub':
+        return '.ant-menu-dark .ant-menu-inline:not(.ant-menu-sub)'
+      case '.ant-checkbox-checked .ant-checkbox-inner::after':
+        return '.ant-checkbox-checked :not(.ant-checkbox-inner)::after'
+      case '.side-menu .logo h1':
+        return '.side-menu .logo :not(h1)'
       case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
       case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
         return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
@@ -48,14 +53,29 @@ module.exports = {
     }
   },
   modifyVars(color) {
-    let darkColors = getDarkColors(color)
+    let opts = (theme == 'night') ? {theme: 'dark'} : undefined
+    const darkColors = getDarkColors(color, theme)
+    const palettes = generate(color, opts)
     return {
-      'primary-color': color,
-      'info-color': color,
-      'processing-color': color,
+      'primary-color': palettes[5],
+      'primary-1': palettes[0],
+      'primary-2': palettes[1],
+      'primary-3': palettes[2],
+      'primary-4': palettes[3],
+      'primary-5': palettes[4],
+      'primary-6': palettes[5],
+      'primary-7': palettes[6],
+      'primary-8': palettes[7],
+      'primary-9': palettes[8],
+      'primary-10': palettes[9],
+      'info-color': palettes[5],
+      'alert-info-bg-color': palettes[0],
+      'alert-info-border-color': palettes[3],
+      'processing-color': palettes[5],
       'menu-dark-submenu-bg': darkColors[0],
       'layout-header-background': darkColors[1],
-      'layout-trigger-background': darkColors[2]
+      'layout-trigger-background': darkColors[2],
+      ...themeCfg[theme]
     }
   }
 }