在vue3中Element Plus切换主题

主题"/>

在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.valueif (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种颜色的切换了

 源码：

第二种

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.valuedocument.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>

来源：在vue3中Element Plus切换主题_element plus 主题-CSDN博客