在vue3中Element Plus切换主题

  一共2种方法。

目录

第一种

第二种

---

第一种

暗黑模式，使用useDark，可以不用安装Element Plus，只切换页面的背景颜色，不改变Element Plus控件的颜色，本案例安装了Element Plus。

1.先建立一个可运行的程序

2.创建useDark.js

import {
	ref
} from 'vue'

export function useDark() {
	const isDark = ref(false)

	const toggle = () => {
		isDark.value = !isDark.value
		if (isDark.value) {
			document.documentElement.classList.add('dark')
		} else {
			document.documentElement.classList.remove('dark')
		}
	}

	return {
		isDark,
		toggle
	}
}

3.HelloWorld.vue代码

 4.效果

点击切换按钮，就可以切换暗黑模式了

5.拓展

可以把颜色改成别的颜色，例如改成红色，这样就可以形成2种颜色的切换了

 

 源码：

https://download.csdn.net/download/u012563853/87537505

第二种

1.首先用HBuilder X建立一个vue3项目，如图所示

2.把不需要的代码删除，增加切换按钮

HelloWorld.vue代码

3.命令安装

cnpm install element-plus --save

  

4.main.js代码

import { createApp } from 'vue'
import App from './App.vue'
 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'//这句是暗黑模式切换
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

5.找到css-vars.css文件

在里面增加代码

/* 暗黑模式 */
.dark-mode {
	background-color: #1f1f1f;
	/* background-color: #F53181; */
	color: #fff;

	/*  .el-button {
    background-color: #333;
    color: #fff;
  }

  .el-input {
    background-color: #333;
    color: #fff;
  } */
}

6.效果

 

 

 拓展：

整体修改控件的颜色