Vue项目动态主题切换

Posted 2023-04-12

参考技术A 通常情况下，很多后台管理界面需要有好几套颜色的主题，我们的Vue项目已经集成了ElementUI，本来也支持主题定制，ElementUI使用了Sass开发样式，因此自定义样式也是很方便的。

参考： https://element.eleme.cn/#/zh-CN/component/custom-theme

主要就是修改ElementUI提供的变量，先根据实际情况修改变量值，然后引入ElementUI提供的scss：

目前我们把通用样式写到 common.scss 中，然后在 index.scss 中引入:

common.scss 片段：

然后在 main.js 中引入就可以了。

这样完成了主题的定制了，不过要实现多套主题切换的话，还有些需要处理

动态主题切换一般有好几种方式：

其实Vue对css动态切换主题支持并不是太好，通常的css被编译处理之后加入页面，因此动态引入不同的css文件比较难做到。

我们这里选择第2种方式。

目录结构如下，图上是两个主题， default 和 simple ：

common.scss——引入ElementUI样式，并自定义一些变量和样式

themes/themeName/index.scss——定制变量

css/main.scss——样式入口

main.scss 主要内容：

sass样式这样引入之后所有样式定义自动在主题样式之下

因为样式已经引入，只需要改变body的样式名称即可，调用 $changeTheme(theme) ：

实际效果参考下面的截图，更多样式可以在主题文件中再做定制。

默认主题：

紫色主题：

目前遇到一个比较奇怪的问题，按照上面的方法做了之后，其他都显示正常，就是图标显示有问题，直接引入主题文件就是好的，放到主题样式之下就有问题。

针对font-face做了特殊处理就可以正常了：

main.scss 中添加：

GitHub地址： https://github.com/fugary/simple-element-ui-template

Antd 最简切换主题色

参考技术A 按antd官方文档，要动态切换主题不能引用@import '~antd/dist/antd.less';而需要引用@import '~antd/dist/antd.variable.min.css';

引入完毕后，配置动态主题色Config。(此处我使用umi的useModel作为状态管理，有用Redux的也可以换成Redux)

配置好后，切换主题色。改变状态参数theme即可。

例如：

切换主题一共就这三处地方，极为简单。

该项目地址以上传 github 。