75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
|
import colors from 'css-color-function'
|
||
|
|
const lightConfig = {
|
||
|
|
'dark-2': 'shade(20%)',
|
||
|
|
'light-3': 'tint(30%)',
|
||
|
|
'light-5': 'tint(50%)',
|
||
|
|
'light-7': 'tint(70%)',
|
||
|
|
'light-8': 'tint(80%)',
|
||
|
|
'light-9': 'tint(90%)'
|
||
|
|
}
|
||
|
|
|
||
|
|
const darkConfig = {
|
||
|
|
'light-3': 'shade(20%)',
|
||
|
|
'light-5': 'shade(30%)',
|
||
|
|
'light-7': 'shade(50%)',
|
||
|
|
'light-8': 'shade(60%)',
|
||
|
|
'light-9': 'shade(70%)',
|
||
|
|
'dark-2': 'tint(20%)'
|
||
|
|
}
|
||
|
|
|
||
|
|
const themeId = 'theme-vars'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @author Jason
|
||
|
|
* @description 用于生成elementui主题的行为变量
|
||
|
|
* 可选值有primary、success、warning、danger、error、info
|
||
|
|
*/
|
||
|
|
|
||
|
|
export const generateVars = (color: string, type = 'primary', isDark = false) => {
|
||
|
|
const colos = {
|
||
|
|
[`--el-color-${type}`]: color
|
||
|
|
}
|
||
|
|
const config: Record<string, string> = isDark ? darkConfig : lightConfig
|
||
|
|
for (const key in config) {
|
||
|
|
colos[`--el-color-${type}-${key}`] = `color(${color} ${config[key]})`
|
||
|
|
}
|
||
|
|
return colos
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @author Jason
|
||
|
|
* @description 用于设置css变量
|
||
|
|
* @param key css变量key 如 --color-primary
|
||
|
|
* @param value css变量值 如 #f40
|
||
|
|
* @param dom dom元素
|
||
|
|
*/
|
||
|
|
export const setCssVar = (key: string, value: string, dom = document.documentElement) => {
|
||
|
|
dom.style.setProperty(key, value)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @author Jason
|
||
|
|
* @description 设置主题
|
||
|
|
*/
|
||
|
|
export const setTheme = (options: Record<string, string>, isDark = false) => {
|
||
|
|
const varsMap: Record<string, string> = Object.keys(options).reduce((prev, key) => {
|
||
|
|
return Object.assign(prev, generateVars(options[key], key, isDark))
|
||
|
|
}, {})
|
||
|
|
|
||
|
|
let theme = Object.keys(varsMap).reduce((prev, key) => {
|
||
|
|
const color = colors.convert(varsMap[key])
|
||
|
|
return `${prev}${key}:${color};`
|
||
|
|
}, '')
|
||
|
|
theme = `:root{${theme}}`
|
||
|
|
let style = document.getElementById(themeId)
|
||
|
|
if (style) {
|
||
|
|
style.innerHTML = theme
|
||
|
|
return
|
||
|
|
}
|
||
|
|
style = document.createElement('style')
|
||
|
|
style.setAttribute('type', 'text/css')
|
||
|
|
style.setAttribute('id', themeId)
|
||
|
|
style.innerHTML = theme
|
||
|
|
document.head.append(style)
|
||
|
|
}
|