feat: custom theme colors support for dark mode; 🌟

新增：自定义主题色对暗黑模式的支持；

package.json

@@ -32,7 +32,7 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@ant-design/colors": "^4.0.0",
+    "@ant-design/colors": "^4.0.1",
     "@vue/cli-plugin-babel": "^4.4.0",
     "@vue/cli-plugin-eslint": "^4.4.0",
     "@vue/cli-service": "^4.4.0",

src/components/setting/Setting.vue

@@ -89,7 +89,7 @@ import { mapState, mapMutations } from 'vuex'
 
 const ColorCheckboxGroup = ColorCheckbox.Group
 const ImgCheckboxGroup = ImgCheckbox.Group
-const colors = ['#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#1890ff', '#2f54eb', '#722ed1']
+const colors = ['#f5222d', '#fa541c', '#fadb14', '#49aa19', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96']
 export default {
   name: 'Setting',
   i18n: require('./i18n'),

src/utils/colors.js

@@ -0,0 +1,17 @@
+const {generate} = require('@ant-design/colors')
+// ant design vue 默认主题色
+const antPrimaryColor = '#1890ff'
+// ant design vue 默认dark主题色，若主题色为默认主题色则返回此 dark 主题色系
+const antDarkColors = ['#000c17', '#001529', '#002140']
+
+function getDarkColors(color, theme) {
+  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
+}
+
+module.exports = {getDarkColors}

src/utils/themeUtil.js

@@ -2,6 +2,7 @@ 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
 
 module.exports = {
   primaryColor: themeColor,
@@ -11,7 +12,8 @@ module.exports = {
     })
     const palettes = generate(color)
     const rgb = varyColor.toNum3(color.replace('#', '')).join(',')
-    return palettes.concat(lightens).concat(rgb)
+    let darkBgColors = getDarkColors(color, 'dark')
+    return palettes.concat(lightens).concat(rgb).concat(darkBgColors)
   },
   changeThemeColor (newColor) {
     let lastColor = this.lastColor || this.primaryColor

vue.config.js

@@ -4,7 +4,6 @@ const {getThemeColors, changeSelector} = require('./src/utils/themeUtil')
 const themeColor = require('./src/config').themeColor
 
 module.exports = {
-  // transpileDependencies: ['webpack-theme-color-replacer'],
   pluginOptions: {
     'style-resources-loader': {
       preProcessor: 'less',

yarn.lock

@@ -9,10 +9,10 @@
   dependencies:
     tinycolor2 "^1.4.1"
 
-"@ant-design/colors@^4.0.0":
+"@ant-design/colors@^4.0.1":
-  version "4.0.0"
+  version "4.0.1"
-  resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-4.0.0.tgz#bcc1183b1fdfd1587d4e655035b3fc47bf3a4ab6"
+  resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-4.0.1.tgz?cache=0&sync_timestamp=1592447143244&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ant-design%2Fcolors%2Fdownload%2F%40ant-design%2Fcolors-4.0.1.tgz#6edab85c6d1ba51accaed4ae64fa934dd5ebb498"
-  integrity sha1-vMEYOx/f0Vh9TmVQNbP8R786SrY=
+  integrity sha1-btq4XG0bpRrMrtSuZPqTTdXrtJg=
   dependencies:
     tinycolor2 "^1.4.1"