vue3.x + elementPlus-ui主题动态切换，亲测可用！！！

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

• 在线 预览效果
• git仓库地址
• 本文换肤的实现思路依然是，手动定制多套主题，然后进行动态切换， 与 vue + element-ui动态主题及网站换肤2021，亲测可用！！！相似。

环境

• 系统 win10 64
• node版本 v15.12.0
• "vue": "^3.0.0"
• "element-plus": "^1.2.0-beta.3"

快速实现主题切换

• 主要实现分为两块，1. 获取主题文件 2. 根据主题类型使用函数进行动态切换加载css变量。

获取主题文件

• 文件内容太长了，从示例仓库复制点击打开 或者直接拷贝仓库themes.js文件放到项目中。

• 当然这么多css 变量不是每个都需要改的，本文作为教学文章所以存入了全部的变量（能获取到的）。个人依实际情况进行删减保留！！！

切换主题实现

• 项目中控制主题切换的地方引入上边获取到的 themes.js（当然你的文件名字如果不是这个请根据实际情况来） 主题文件。
• 作者放在了 src -> utils -> themes.js 目录下，所以导入路径是import themes from '@/utils/themes'。
• 通过 switchTheme函数 来控制主题的切换

switchTheme(type) {
  // 根据不同的主题类型 获取不同主题数据 
  // themes 对象包含 defaultTheme、darkTheme 两个属性即默认主题与深色主题
  // 通过`import themes from '@/utils/themes'` 导入
  type = type || 'darkTheme'
  const colorObj = themes[type]

  // 获取基本色色阶
  // colorMix是一个函数
  for (let i = 1; i < 10; i += 1) {
    colorObj[`--el-color-primary-light-${10 - i}`] = colorMix(colorObj['--el-color-white'], colorObj['--el-color-primary'], i * 0.1)
  }

  // 设置css 变量
  Object.keys(colorObj).map(item => {
    document.documentElement.style.setProperty(item, colorObj[item])
  })
}
复制代码

• colorMix函数 仓库示例是在 src -> utils -> tool.js 导出。

const colorMix = (color1, color2, weight) => {
  weight = Math.max(Math.min(Number(weight), 1), 0)
  let r1 = parseInt(color1.substring(1, 3), 16)
  let g1 = parseInt(color1.substring(3, 5), 16)
  let b1 = parseInt(color1.substring(5, 7), 16)
  let r2 = parseInt(color2.substring(1, 3), 16)
  let g2 = parseInt(color2.substring(3, 5), 16)
  let b2 = parseInt(color2.substring(5, 7), 16)
  let r = Math.round(r1 * (1 - weight) + r2 * weight)
  let g = Math.round(g1 * (1 - weight) + g2 * weight)
  let b = Math.round(b1 * (1 - weight) + b2 * weight)
  r = ("0" + (r || 0).toString(16)).slice(-2)
  g = ("0" + (g || 0).toString(16)).slice(-2)
  b = ("0" + (b || 0).toString(16)).slice(-2)
  return "#" + r + g + b;
}
复制代码

主题切换的一些疑问

切换主题的 css变量 是从哪里获取的？

• 打开 elementPlus-ui 官方网站 f12 审查元素。拿取所有 css变量。

如何知道 这些css变量用来做什么的？

• 根据css变量名称可以猜测到一部分。其余可以通过 element-ui在线主题预览 进行对照！！！

• 上方可以切换 选择不同的组件、样式进行自定义

switchTheme 函数中的获取基本色色阶是什么？

• 就是图片的里的变量，控制如navmenu导航 hover 的背景色等...

如何快速生成预览主题？

• 通过观察发现主要的颜色变量命名并没有太大的变化。
• 依然可以通过 element-ui在线主题预览进行配置，然后手动查找替换实现， 当然你也可以遍历生成！！

网站与主题颜色同步更改

• 项目内需要跟随主题改变的颜色，使用主题的css变量即可如：

参考文章

• Vue3 Element-Plus 动态更换主题简单实现

往期文章

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

在座的各位都是小仙女、大帅比你们没啥意见吧？

• 上个主题切换文章 收藏比点赞多就离谱！！！！！
• 有关于文章的疑问，欢迎评论！