113 lines
4.0 KiB
JavaScript
113 lines
4.0 KiB
JavaScript
const client = require('webpack-theme-color-replacer/client') // 加载webpack-theme-color-replacer插件
|
|
const {theme} = require('../config') // 加载配置文件中的主题配置
|
|
const {getMenuColors, getAntdColors, getThemeToggleColors, getFunctionalColors} = require('../utils/colors') // 加载颜色配置文件
|
|
const {ANTD} = require('../config/default') // 加载默认配置文件中的ANTD配置
|
|
const Cookie = require('js-cookie')
|
|
// 获取主题颜色
|
|
function getThemeColors(color, $theme) {
|
|
const _color = color || theme.color // 获取主题颜色
|
|
const mode = $theme || theme.mode // 获取主题模式
|
|
const replaceColors = getThemeToggleColors(_color, mode) // 获取主题切换颜色
|
|
const themeColors = [ // 获取主题颜色
|
|
...replaceColors.mainColors, // 替换mainColors中的颜色
|
|
...replaceColors.subColors, // 替换subColors中的颜色
|
|
...replaceColors.menuColors, // 替换menuColors中的颜色
|
|
...replaceColors.contentColors, // 替换contentColors中的颜色
|
|
...replaceColors.rgbColors, // 替换rgbColors中的颜色
|
|
...replaceColors.functionalColors.success, // 替换functionalColors中的success颜色
|
|
...replaceColors.functionalColors.warning, // 替换functionalColors中的warning颜色
|
|
...replaceColors.functionalColors.error, // 替换functionalColors中的error颜色
|
|
]
|
|
return themeColors // 返回主题颜色
|
|
}
|
|
|
|
// 修改主题颜色
|
|
function changeThemeColor(newColor, $theme) { // 改变主题颜色
|
|
let promise = client.changer.changeColor({newColors: getThemeColors(newColor, $theme)}) // 改变主题颜色
|
|
return promise
|
|
}
|
|
|
|
// 修改antd主题颜色
|
|
function modifyVars(color) { // 修改antd主题颜色
|
|
let _color = color || theme.color // 获取主题颜色
|
|
const palettes = getAntdColors(_color, theme.mode) // 获取antd主题颜色
|
|
const menuColors = getMenuColors(_color, theme.mode) // 获取菜单主题颜色
|
|
const {success, warning, error} = getFunctionalColors(theme.mode) // 获取功能性颜色
|
|
const primary = palettes[5]
|
|
return {
|
|
'primary-color': primary,
|
|
'primary-1': palettes[0],
|
|
'primary-2': palettes[1],
|
|
'primary-3': palettes[2],
|
|
'primary-4': palettes[3],
|
|
'primary-5': palettes[4],
|
|
'primary-6': palettes[5],
|
|
'primary-7': palettes[6],
|
|
'primary-8': palettes[7],
|
|
'primary-9': palettes[8],
|
|
'primary-10': palettes[9],
|
|
'info-color': primary,
|
|
'success-color': success[5],
|
|
'warning-color': warning[5],
|
|
'error-color': error[5],
|
|
'alert-info-bg-color': palettes[0],
|
|
'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,
|
|
'menu-dark-submenu-bg': menuColors[0],
|
|
'layout-header-background': menuColors[1],
|
|
'layout-trigger-background': menuColors[2],
|
|
'btn-danger-bg': error[4],
|
|
'btn-danger-border': error[4],
|
|
...ANTD.theme[theme.mode]
|
|
}
|
|
}
|
|
|
|
// 加载本地主题
|
|
function loadLocalTheme(localSetting) {
|
|
if (localSetting && localSetting.theme) {
|
|
let {color, mode} = localSetting.theme
|
|
color = color || theme.color
|
|
mode = mode || theme.mode
|
|
changeThemeColor(color, mode)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取本地保存的配置
|
|
* @param load {boolean} 是否加载配置中的主题
|
|
* @returns {Object}
|
|
*/
|
|
function getLocalSetting(loadTheme) {
|
|
let localSetting = {}
|
|
try {
|
|
const localSettingCookieStr = Cookie.get(process.env.VUE_APP_THEME_SETTING_KEY)
|
|
const localSettingStr = localStorage.getItem(process.env.VUE_APP_THEME_SETTING_KEY)
|
|
if (!localSettingStr){
|
|
localSetting = JSON.parse(localSettingCookieStr)
|
|
}else{
|
|
localSetting = JSON.parse(localSettingStr)
|
|
}
|
|
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
if (loadTheme) {
|
|
loadLocalTheme(localSetting)
|
|
}
|
|
return localSetting
|
|
}
|
|
|
|
module.exports = {
|
|
getThemeColors,
|
|
changeThemeColor,
|
|
modifyVars,
|
|
loadLocalTheme,
|
|
getLocalSetting
|
|
}
|