Published on

前端全局换肤

Authors
  • avatar
    Name
    MissTree
    Twitter

全局肤色替换

将后台配置的颜色 覆盖到全局HTML上

formatConfig =  this.processSkinConfig(themeConfig)
this.setDomStyle(formatConfig)

/**
 * @desc: 处理全局皮肤配置的方法
 * @argument themeConfig  原始配置数据
*/
processSkinConfig = function (themeConfig) {
 // 数据结构处理
 let allKey = {};
 Object.keys(themeConfig).forEach(keyItem => {
   let ret = themeConfig[keyItem];
   typeof ret === 'string' && (ret = [ret]);
   allKey[`--${kebabCase(keyItem)}`] = ret[0];
   ret[1] && (allKey[`--rgb-${kebabCase(keyItem)}`] = ret[1]);
 })
}

// 更改全局样式
setDomStyle = (allKey)=>{
 Object.keys(allKey).forEach(el => {
  document.documentElement.style.setProperty(el, allKey[el]);
 })
}