从零开始Vue3+Element Plus后台管理系统(17)——一键换肤的N种方案

暗黑模式

基于Element Plus和Tailwind CSS灵活的设计，我们很容易在项目中实现暗黑模式，具体可以参考之前的文章《从零开始写一个Vue3+Element Plus的后台管理系统(二)——Layout页面布局的实现》

换肤方案

如果需要给用户提供更多主题，更丰富的皮肤，就得自己来开发换肤功能了。

换肤的方式由易到难大概分为3种：

1. 简单换肤，提供N种配色方案供用户选择，一般只对配色进行切换，比如禅道，它提供了蓝色、粉色、绿色等方案；
2. 个性化定制，可以自己定制主要颜色、阴影、边框等样式，个性化更强；
3. 整站模板，提供N个风格迥异的模版布局和UI界面，彻底改头换面。

技术实现

以下仅针对使用Element Plus 的项目中进行换肤。

CSS变量

在开始之前，需要先了解CSS变量，它是一个非常有用的功能，几乎所有浏览器都支持，除了IE。既然选择了Vue3，明摆着就不想支持IE，所以我们可以愉快的使用CSS变量。

Element Plus 提取并整理了所有的设计变量，并通过 CSS Vars 技术实现动态更新主题。在我们的项目中找到node_modules/element-plus/theme-chalk，查看其中的CSS文件，可以看到其中有各种组件用到的CSS变量的定义。我把index.css拿出来格式化并存档，方便日后参考使用。

格式化以后的文件有140多行，截取部分贴出来:

:root {
   
   
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary-rgb: 64, 158, 255;
  --el-color-success-rgb: 103, 194, 58;
  --el-color-warning-rgb: 230, 162, 60;
  ...
}

:root {
   
   
  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: #409eff;
  ...
}

在f12控制台，或者查看单个组件的样式文件，可以看到Element Plus通过CSS变量来设置组件的样式。