useDark意思是否使用深色模式,useDark它是通过读取localStorage/sessionStorage的存储值(key 是可自定义的),从而设置html的class。从element-plus官网可以看到,它自带有暗黑主题,我们只需要在 html 上添加一个名为 dark 的类,所以选择使用useDark方便了许多。
1、首先项目要有elementPlus
2、地址:https://element-plus.gitee.io/zh-CN/guide/dark-mode.html
3、创建demo.vue文件,
<template>
<div class="demo">
<div>这是一个深色模式的切换demo</div>
<el-switch inline-prompt v-model="theme" @click="toggle()"></el-switch>
</div>
</template>
<script setup>
import { useDark, useToggle } from '@vueuse/core'
import { ref } from "vue";
const theme = ref(false)
const isDark = useDark({
// 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
storageKey: "useDarkKEY",
// 暗黑class名字
valueDark: "dark",
// 高亮class名字
valueLight: "light",
});
const toggle = useToggle(isDark);
</script>
<style>
.demo {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
此时:我们可以看到html我们设置了了一个高亮的类名名称。
Local Storage中可以看到