feat: custom theme colors support for dark mode; :star2: 新增：自定义主题色对暗黑模式的支持；

iczer

2020-06-30 f348ddfe5e3fcb0abe1ef302621f2ee8cc67da73

feat: custom theme colors support for dark mode; :star2:
新增：自定义主题色对暗黑模式的支持；

 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 @@

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

New file
@@ -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 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 @@
    })
    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 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":
  version "4.0.0"
  resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-4.0.0.tgz#bcc1183b1fdfd1587d4e655035b3fc47bf3a4ab6"
  integrity sha1-vMEYOx/f0Vh9TmVQNbP8R786SrY=
"@ant-design/colors@^4.0.1":
  version "4.0.1"
  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-btq4XG0bpRrMrtSuZPqTTdXrtJg=
  dependencies:
    tinycolor2 "^1.4.1"