基于vue3+element-plus实现换肤需求

1. 代码实现效果

• 1. 支持自定义Header,Menu样式
• 2. 支持暗夜模式
• 3. 支持持久化记录用户选项

效果展示

换肤控制面板

2.开发版本依赖

3.开发思路

• 1. 参考了网上大神们的开发思路以及element-plus官网element-plus 更换主题色介绍
• 2. element-plus极大的简化了换肤实现的步骤，最佳实践就是直接覆盖全局变量，全局变量修改混入方法如下

export const mixColor = (color1: string, color2: string, weight: number) => {
  weight = Math.max(Math.min(Number(weight), 1), 0)
  const r1 = parseInt(color1.substring(1, 3), 16)
  const g1 = parseInt(color1.substring(3, 5), 16)
  const b1 = parseInt(color1.substring(5, 7), 16)
  const r2 = parseInt(color2.substring(1, 3), 16)
  const g2 = parseInt(color2.substring(3, 5), 16)
  const b2 = parseInt(color2.substring(5, 7), 16)
  const r = Math.round(r1 * (1 - weight) + r2 * weight)
  const g = Math.round(g1 * (1 - weight) + g2 * weight)
  const b = Math.round(b1 * (1 - weight) + b2 * weight)
  const _r = ("0" + (r || 0).toString(16)).slice(-2)
  const _g = ("0" + (g || 0).toString(16)).slice(-2)
  const _b = ("0" + (b || 0).toString(16)).slice(-2)
  return "#" + _r + _g + _b;
}

如上图所示，element-plus中的主题色就是通过--el-color-primary变量来实现，剩余未覆盖的颜色变量，我目前采取的做法是自己声明全局变量，如下图所示

4.具体实现

源码地址

注意事项

1. 要想使用暗夜模式，需要引入element-plus的dark主题
2. 对于element-plus未覆盖到的样式，需要自己手动声明颜色变量，eg: