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

12,326 阅读3分钟

「这是我参与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)

image.png

引入css样式文件

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

image.png

动态更改主题

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

image.png

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

image.png

image.png

image.png

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

往期文章