mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
feat: add functional colors to the theme configuration; 🌟
新增:主题配置增加功能性颜色;
This commit is contained in:
parent
40472b21dd
commit
e619e44d4f
@ -2,6 +2,9 @@
|
|||||||
const ANTD = {
|
const ANTD = {
|
||||||
primary: {
|
primary: {
|
||||||
color: '#1890ff',
|
color: '#1890ff',
|
||||||
|
warning: '#faad14',
|
||||||
|
success: '#52c41a',
|
||||||
|
error: '#f5222d',
|
||||||
light: {
|
light: {
|
||||||
menuColors: ['#000c17', '#001529', '#002140']
|
menuColors: ['#000c17', '#001529', '#002140']
|
||||||
},
|
},
|
||||||
|
@ -10,6 +10,20 @@ function getAntdColors(color, mode) {
|
|||||||
return generate(color, options)
|
return generate(color, options)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取功能性颜色
|
||||||
|
function getFunctionalColors(mode) {
|
||||||
|
let options = mode && (mode == themeMode.NIGHT) ? {theme: 'dark'} : undefined
|
||||||
|
const {success, warning, error} = ANTD.primary
|
||||||
|
const successColors = generate(success, options)
|
||||||
|
const warningColors = generate(warning, options)
|
||||||
|
const errorColors = generate(error, options)
|
||||||
|
return {
|
||||||
|
success: [...successColors.slice(0, 3), successColors[5]],
|
||||||
|
warning: [...warningColors.slice(0, 3), warningColors[5]],
|
||||||
|
error: [...errorColors.slice(0, 3), errorColors[5]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 获取菜单色系
|
// 获取菜单色系
|
||||||
function getMenuColors(color, mode) {
|
function getMenuColors(color, mode) {
|
||||||
if (mode == themeMode.NIGHT) {
|
if (mode == themeMode.NIGHT) {
|
||||||
@ -39,7 +53,8 @@ function getThemeToggleColors(color, mode) {
|
|||||||
contentColors = [...new Set(contentColors)]
|
contentColors = [...new Set(contentColors)]
|
||||||
// rgb 格式的主题色
|
// rgb 格式的主题色
|
||||||
let rgbColors = [toNum3(primary).join(',')]
|
let rgbColors = [toNum3(primary).join(',')]
|
||||||
return {primary, mainColors, subColors, menuColors, contentColors, rgbColors}
|
let functionalColors = getFunctionalColors(mode)
|
||||||
|
return {primary, mainColors, subColors, menuColors, contentColors, rgbColors, functionalColors}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toNum3(color) {
|
function toNum3(color) {
|
||||||
@ -78,5 +93,6 @@ module.exports = {
|
|||||||
toNum3,
|
toNum3,
|
||||||
getAntdColors,
|
getAntdColors,
|
||||||
getMenuColors,
|
getMenuColors,
|
||||||
getThemeToggleColors
|
getThemeToggleColors,
|
||||||
|
getFunctionalColors
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const client = require('webpack-theme-color-replacer/client')
|
const client = require('webpack-theme-color-replacer/client')
|
||||||
const {theme} = require('../config')
|
const {theme} = require('../config')
|
||||||
const {getMenuColors, getAntdColors, getThemeToggleColors} = require('../utils/colors')
|
const {getMenuColors, getAntdColors, getThemeToggleColors, getFunctionalColors} = require('../utils/colors')
|
||||||
const {ANTD} = require('../config/default')
|
const {ANTD} = require('../config/default')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -13,7 +13,10 @@ module.exports = {
|
|||||||
...replaceColors.subColors,
|
...replaceColors.subColors,
|
||||||
...replaceColors.menuColors,
|
...replaceColors.menuColors,
|
||||||
...replaceColors.contentColors,
|
...replaceColors.contentColors,
|
||||||
...replaceColors.rgbColors
|
...replaceColors.rgbColors,
|
||||||
|
...replaceColors.functionalColors.success,
|
||||||
|
...replaceColors.functionalColors.warning,
|
||||||
|
...replaceColors.functionalColors.error,
|
||||||
]
|
]
|
||||||
return themeColors
|
return themeColors
|
||||||
},
|
},
|
||||||
@ -25,6 +28,7 @@ module.exports = {
|
|||||||
let _color = color || theme.color
|
let _color = color || theme.color
|
||||||
const palettes = getAntdColors(_color, theme.mode)
|
const palettes = getAntdColors(_color, theme.mode)
|
||||||
const menuColors = getMenuColors(_color, theme.mode)
|
const menuColors = getMenuColors(_color, theme.mode)
|
||||||
|
const {success, warning, error} = getFunctionalColors(theme.mode)
|
||||||
const primary = palettes[5]
|
const primary = palettes[5]
|
||||||
return {
|
return {
|
||||||
'primary-color': primary,
|
'primary-color': primary,
|
||||||
@ -39,8 +43,17 @@ module.exports = {
|
|||||||
'primary-9': palettes[8],
|
'primary-9': palettes[8],
|
||||||
'primary-10': palettes[9],
|
'primary-10': palettes[9],
|
||||||
'info-color': primary,
|
'info-color': primary,
|
||||||
|
'success-color': success[3],
|
||||||
|
'warning-color': warning[3],
|
||||||
|
'error-color': error[3],
|
||||||
'alert-info-bg-color': palettes[0],
|
'alert-info-bg-color': palettes[0],
|
||||||
'alert-info-border-color': palettes[3],
|
'alert-info-border-color': palettes[2],
|
||||||
|
'alert-success-bg-color': success[0],
|
||||||
|
'alert-success-border-color': success[2],
|
||||||
|
'alert-warning-bg-color': warning[0],
|
||||||
|
'alert-warning-border-color': warning[2],
|
||||||
|
'alert-error-bg-color': error[0],
|
||||||
|
'alert-error-border-color': error[2],
|
||||||
'processing-color': primary,
|
'processing-color': primary,
|
||||||
'menu-dark-submenu-bg': menuColors[0],
|
'menu-dark-submenu-bg': menuColors[0],
|
||||||
'layout-header-background': menuColors[1],
|
'layout-header-background': menuColors[1],
|
||||||
|
Loading…
x
Reference in New Issue
Block a user