Vue3.x + Element Plus与Vue2.x + Element ui多套主题的切换方案

demo地址 Vue+Element更换主题: Vue + Element项目，更换几套主题的方案

思路很简单，就是写好每套样式，写个切换功能，切换主题即可

具体实现方案：

1. 准备多套css主题,覆盖element的样式，或者自己写样式；主题的同级目录加个引入主题的js脚本，如下
   

   // index.js
   // 引入主题的方法
   
   // defaultTheme 就是某个主题文件名称的字符串，如'default'，只是我把写在了config中，这里也可以直接定义赋值
   import { defaultTheme } from '@/config/index.js'
   
   // 主题名称要存储在localStorage中，这样切换主题刷新页面后效果不丢失
   let theme = localStorage.getItem('theme')
   theme = theme ? theme : defaultTheme
   
   // 根据所选的主题名称引入主题样式
   import(`./${theme}.scss`)

   // green.scss
   
   // 覆盖掉Element Plus默认的样式
   // 注意，element ui 与element plus的主题覆盖的写法不一样，整个主题切换方案，element ui 与element plus只有这里有差异
   // 下面是element plus的覆盖写法
   @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   	$colors: (
   		'primary': (
   			'base': #67c23a,
   		),
   	)
   );
   @use 'element-plus/theme-chalk/src/index.scss' as *;
   
   // 在这里面直接写css样式也可以
   .btn {
   	background-color: #67c23a;
   }

2. 写个切换主题的下拉框

   <template>
       <!-- 主题切换 -->
       <el-select class="theme" v-model="theme" @change="themeChange" size="small">
           <el-option v-for="(item, index) in themeList" :key="index" :value="item.value" :label="item.name"></el-option>
       </el-select>
   </template>
   
   <script>
   import { themeList, defaultTheme } from '@/config';
   
   export default {
   	data() {
   		return {
   			theme: '',
   			themeList,
   		};
   	},
   	created() {
   		this.themeInit();
   	},
   	methods: {
   		// 主题初始化
   		themeInit() {
   			let theme = localStorage.getItem('theme');
   			this.theme = theme ? theme : defaultTheme;
   		},
   
   		// 切换主题
   		themeChange(val) {
   			localStorage.setItem('theme', val);
   			window.location.reload();
   		},
   	},
   };
   </script>
   

3. 在main.js中引入主题
4. 已经OK了，再附上config.js

   // config/index.js
   
   // 默认主题
   export const defaultTheme = "green"
   
   // 所有主题
   export const themeList = [
       { name: '默认主题', value: 'default' },
       { name: '绿色主题', value: 'green' },
   ]