chore: optimize the code of theme color; :star2:

chenghongxing

2020-07-22 a62c293e421809d8bc23812c6facf872c1c8ba09

chore: optimize the code of theme color; :star2:

 src/components/chart/MiniProgress.vue

@@ -25,7 +25,7 @@
    position: relative;
    width: 100%;
    .wrap {
      background-color: @bg-color;
      background-color: @layout-bg-color;
      position: relative;
    }
    .progress {

 src/components/chart/RankingList.vue

@@ -35,7 +35,7 @@
          line-height: 22px;
        }
        span:first-child {
          background-color: @bg-color;
          background-color: @layout-bg-color;
          border-radius: 20px;
          display: inline-block;
          font-size: 12px;

 src/config/default/setting.config.js

@@ -4,6 +4,9 @@
  theme: {                              //主题
    color: '#1890ff',                   //主题色
    mode: 'dark',                       //主题模式 可选 dark、 light 和 night
    success: '#52c41a',                 //成功色
    warning: '#faad14',                 //警告色
    error: '#f5222d',                   //错误色
  },
  layout: 'side',                       //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
  fixedHeader: false,                   //固定头部状态栏，true:固定，false:不固定

 src/theme/default/color.less

@@ -1,6 +1,5 @@
@import '~ant-design-vue/lib/style/themes/default';

@primary: @primary-color;
@gray-1: #ffffff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@@ -15,18 +14,26 @@
@gray-12: #141414;
@gray-13: #000000;

@primary-color: @primary-color;
@success-color: @success-color;
@warning-color: @warning-color;
@error-color: @warning-color;

@title-color: @heading-color;
@text-color: @text-color;
@text-color-inverse: @text-color-inverse;
@text-color-second: @text-color-secondary;

@layout-bg-color: @layout-body-background;
@base-bg-color: @body-background;
@bg-color: @layout-body-background;
@hover-bg-color: rgba(0, 0, 0, 0.025);
@border-color: @border-color-split;
@shadow-color: @shadow-color;

@text-color-inverse: @text-color-inverse;
@hover-bg-color-light: @hover-bg-color;
@hover-bg-color-dark: @primary-7;
@hover-bg-color-night: rgba(255, 255, 255, 0.025);
@header-bg-color-dark: @layout-header-background;
@border-color: @border-color-base;

@shadow-down: @shadow-1-down;
@shadow-up: @shadow-1-up;

 src/theme/default/style.less

@@ -13,7 +13,7 @@
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: @primary;
    background: @primary-color;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);

 src/utils/colors.js

@@ -1,6 +1,7 @@
const varyColor = require('webpack-theme-color-replacer/client/varyColor')
const generate =  require('@ant-design/colors/lib/generate').default
const {ADMIN, ANTD} = require('../config/default')
const Config = require('../config')

const themeMode = ADMIN.theme.mode

@@ -13,7 +14,11 @@
// 获取功能性颜色
function getFunctionalColors(mode) {
  let options = mode && (mode == themeMode.NIGHT) ? {theme: 'dark'} : undefined
  const {success, warning, error} = ANTD.primary
  let {success, warning, error} = ANTD.primary
  const  {success: s1, warning: w1, error: e1} = Config.theme
  success = success && s1
  warning = success && w1
  error = success && e1
  const successColors = generate(success, options)
  const warningColors = generate(warning, options)
  const errorColors = generate(error, options)