如果 vue 项目是 vue2 创建的

• 在 static/css 文件中声明 两个文件分别是 dark.css 和 light.css
• 在项目中的index.html 文件中

<!-- 引入黑白风格中其中一个样式 -->
<link rel="stylesheet" id="style" href="/static/css/dark.css">

在app.vue 里面，页面已加载就设置当前项目的背景颜色

created(){
	let style=localStorage.getitem("style"),
	if(style){
		document.getElementById("style").setAttribute("href",style);
	}
}

在页面需要切换的地方

<el-dropdown @command="tabTheme" style="margin-right:20px">
	<span class="el-dropdown-link">
		<i class="el-icon-goods" style="fonr-size:18px;color:#fff;cursor:pointer" />
	</span>
	<el-dropdown-menu slot="dropdown">
		<el-dropdown-item command="dark">dark</el-dropdown-item>
		<el-dropdown-item command="light">light</el-dropdown-item>
	</el-dropdown-menu>
</el-dropdown>

事件
当点击按钮进行切换就会进行页面风格的切换，tabTheme 按钮点击事件

tabTheme(val){
	document.getElmentByid("style").setAttribute("href","/static/css/"+val+".css");
	localStorage.setltem("style","/static/css/"+val+".css")
}

如果 vue 项目是 vue3 创建的

• 在 public/css 文件中声明 两个文件分别是 dark.css 和 light.css
• 在项目中的index.html 文件中

<!-- 引入黑白风格中其中一个样式 -->
<link rel="stylesheet" id="style" href="/css/dark.css">

在app.vue 里面，页面已加载就设置当前项目的背景颜色

created(){
	let style=localStorage.getitem("style"),
	if(style){
		document.getElementById("style").setAttribute("href",style);
	}
}

在页面需要切换的地方

<el-dropdown @command="tabTheme" style="margin-right:20px">
	<span class="el-dropdown-link">
		<i class="el-icon-goods" style="fonr-size:18px;color:#fff;cursor:pointer" />
	</span>
	<el-dropdown-menu slot="dropdown">
		<el-dropdown-item command="dark">dark</el-dropdown-item>
		<el-dropdown-item command="light">light</el-dropdown-item>
	</el-dropdown-menu>
</el-dropdown>

事件
当点击按钮进行切换就会进行页面风格的切换，tabTheme 按钮点击事件

tabTheme(val){
	document.getElmentByid("style").setAttribute("href","/css/"+val+".css");
	localStorage.setltem("style","/css/"+val+".css")
}