vue3+elementPlus主题动态切换2022，亲测可用！

唐诗c

已于 2022-06-04 21:28:46 修改

阅读量7.9k

点赞数 6

分类专栏： vue 文章标签：前端 vue.js

于 2021-11-29 20:16:44 首次发布

本文链接：https://blog.csdn.net/mucuni/article/details/121618458

版权

本文介绍了如何在Vue3项目中结合ElementPlus实现动态主题切换。首先，需要获取主题文件，然后根据主题类型使用函数加载相应的CSS变量。在实际应用中，可以适当裁剪CSS变量文件。切换主题时，通过控制CSS变量实现颜色同步更改。文章还解答了关于主题切换的一些疑问，如CSS变量的来源和基本色色阶的作用。

摘要由CSDN通过智能技术生成

环境

系统: win10 64
node版本 v16.13.2
vue: ^3.2.33
element-plus: ^2.2.0

开始

在线预览效果｜｜ git仓库地址
本文换肤的实现思路是手动定制多套主题，然后进行动态切换与 vue + element-ui动态主题及网站换肤2021，亲测可用！！！相似。
主要实现分为两块
1. 获取主题文件。
2. 根据主题类型使用函数进行动态切换加载css变量。

获取主题文件

文件内容太长了从示例仓库复制点击打开或者直接拷贝仓库themes.js文件放到项目中。
当然这么多css 变量不是每个都需要改的，本文作为示例文章所以存入了全部的变量（能获取到的）。个人依实际情况进行删减保留！！！

根据主题类型使用函数进行动态切换加载css变量

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

src -> utils -> elCssVar.json 是获取的element-plus的css变量
通过 switchTheme函数 来控制主题的切换

data() {
   
  return {
   
    currentSkinName: 'darkTheme',
    themeColorObj: {
   
      defaultTheme: {
   
        title: '浅色主题'
      },
      darkTheme: {
   
        title: '深色主题'
      }
    },
    themeObj: {
   }
  };
},
mounted() {
   
  this.switchTheme()
},
methods: {
   
  // 根据不同的主题类型 获取不同主题数据
  switchTheme(type) {
   
    // themes 对象包含 defaultTheme、darkTheme 两个属性即默认主题与深色主题
    this.currentSkinName = type || 'darkTheme'
    this.themeObj = themes[this.currentSkinName]