vue3.x + elementPlus-ui主题动态切换
环境
系统 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变量即可如：
作者：唐诗
链接：https://juejin.cn/post/7035793403342225445
伪原创工具 SEO网站优化 https://www.237it.com/