chore: optimize the code of theme color; 🌟

src/components/chart/MiniProgress.vue

@@ -25,7 +25,7 @@ export default {
     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 @@ export default {
           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 @@ module.exports = {
   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 getAntdColors(color, mode) {
 // 获取功能性颜色
 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)