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