在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代码

<template>
	<div :class="{ dark: isDark }">
		<h1>{{ msg }}</h1>
		<el-button type="primary">Primary</el-button>
		<h1>Dark Mode Demo</h1>
		<p>Current mode: {{ isDark ? 'Dark' : 'Light' }}</p>
		<button @click="toggleTheme">Toggle Theme</button>
	</div>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		useDark
	} from './useDark'
	defineProps({
		msg: String
	})

	const dark = useDark()

	const isDark = ref(dark.isDark)
	const toggleTheme = () => {
		dark.toggle()
	}
	const count = ref(0)
</script>
<style>
	.dark {
		background-color: #333;
		/* red */
		color: #fff;
	}
</style>

 4.效果

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

5.拓展

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

 源码：

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

第二种

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

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

HelloWorld.vue代码

<template>
	<div>
		<el-button type="primary">Primary</el-button>
		<el-switch @click="toggleDarkMode()" v-model="value1" />
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const value1 = ref(true)
	const isDarkMode = ref(false)
	const toggleDarkMode = () => {
		isDarkMode.value = !isDarkMode.value
		document.body.classList.toggle('dark-mode')
	}
</script>



<style scoped>
	a {
		color: #42b983;
	}
</style>

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.效果

 拓展：

整体修改控件的颜色

<template>
	<h1>{{ msg }}</h1>
	<el-button type="primary">Primary</el-button>
	<el-switch v-model="value1" />
	<el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	defineProps({
		msg: String
	})
	const value1 = ref(true)
	const value2 = ref(true)
	onMounted(() => {
		document.body.style.setProperty('--el-color-primary', '#E6196D');
		document.body.style.setProperty('--el-color-primary-light-9', '#95d475');
		document.body.style.setProperty('--el-color-primary-light-3', '#95d475');
	})

	const count = ref(0)
</script>
<style scoped>
</style>