diff --git a/src/components/chart/MiniProgress.vue b/src/components/chart/MiniProgress.vue index c4d0388..b005e1c 100644 --- a/src/components/chart/MiniProgress.vue +++ b/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 { diff --git a/src/components/chart/RankingList.vue b/src/components/chart/RankingList.vue index ec7b309..81f6127 100644 --- a/src/components/chart/RankingList.vue +++ b/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; diff --git a/src/config/default/setting.config.js b/src/config/default/setting.config.js index a1b3e97..64f381c 100644 --- a/src/config/default/setting.config.js +++ b/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:不固定 diff --git a/src/theme/default/color.less b/src/theme/default/color.less index df4f4d3..595934b 100644 --- a/src/theme/default/color.less +++ b/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; diff --git a/src/theme/default/style.less b/src/theme/default/style.less index 5493797..3400e0a 100644 --- a/src/theme/default/style.less +++ b/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); diff --git a/src/utils/colors.js b/src/utils/colors.js index ea10511..a273875 100644 --- a/src/utils/colors.js +++ b/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)