vue + element-ui动态主题及网站换肤2021，亲测可用

原文地址

猛击标题 预览主题切换效果

• 本文 git 仓库地址 猛击查看
• 本文主题换肤整体实现换肤思路是，定制多套 element-ui 主题，然后通过动态更改 link href样式文件来实现，最后结合 css 变量实现网站整体换肤。
• 此处点名表扬 arcoDesign 自带了暗黑主题切换还十分方便。不过只支持vue3。
• 说到这里就不得不说 element-plus 都更新这么久了在线定制主题还没做好(2021-11-08)，所以本文不适用于 element-plus (element-plus貌似重写了部分样式 所以直接使用element-ui样式会有些问题)。

项目环境

• 系统 win
• vue-cli3.x
• element-ui: “^2.14.1”
• vue：“^2.6.11”

element-ui 定制主题

• element-ui整体换肤，首先要根据需要定制主题，推荐查看官方文档关于自定义主题这一节，介绍了官方提供的定制主题工具。
• 我们使用 element-ui 在线主题生成工具定制主题， 具体使用可以看这篇文章

实现动态切换主题

• 从最终实践结果来看，无论那种动态设置 el（element-ui 后边简称el） 主题都需要动态切换css来实现。当然我把动态更改sass变量也归为动态切换css。

将样式文件拷贝到静态文件目录

• 上边完成 el 定制主题后点击下载会得到一份主题文件，其实只需要 theme文件夹的内容，但是建议直接拷贝文件夹丢到静态文件目录。vue-cli2 静态文件一般是根目录下 static 文件夹， vue-cli3 静态文件一般可以放在 public 文件夹下。
• 为什么要放到静态文件夹 因为样式文件是在index.html 通过link方式引入 其他位置会找不到文件
• 两套主题切换，示例采用深浅搭配，浅色其实就是白垩主题，深色为自定义主题。将下载好的css样式文件放到 public -> theme 文件下得到这样一个目录。（两份文件可以放在一起 至于为啥不放 这是演示！！！1）

引入css样式文件

• 在 index.html引入样式文件，如下图所示。

动态更改主题

• 其实就是利用上图里的元素id后边获取它更改link的href的值。这里借鉴了这篇文章的引用方法部分。

let themeName = this.currentSkinName || 'defaultTheme'

const typeObj = {
  darkTheme: './theme/darkTheme/theme/index.css',
  defaultTheme: './theme/defaultTheme/theme/index.css',
}
document.getElementById('themeStyle').href = typeObj[themeName]

网站与主题同步换肤

• 这就要使用到 css 变量了，预先定义出样式变量，尽量少的定义颜色变量使用更少的变量做更多事情。
• 示例代码中只简单实现了网站换肤，非最优解，可参照 当然直接用也没啥大问题
• 源码 猛击查看

如果有更好的实现方法 欢迎留言讨论

往期文章

• openlayers 实战离线地图
• 这两个前端下载库推荐给你
• vue3 JSX 从零开始
• vue3.0实战踩坑
• 手摸手，配置项目中全局loading
• vue实现网站换肤-CSS变量
• element-ui定制主题