「这是我参与11月更文挑战的第3天，活动详情查看：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 变量了，预先定义出样式变量，尽量少的定义颜色变量使用更少的变量做更多事情。
- 示例代码中只简单实现了网站换肤，非最优解，可参照 当然直接用也没啥大问题
- 源码 猛击查看
