主题"/>
在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博客
更多推荐
在vue3中Element Plus切换主题
发布评论