ElementPlus (深色主题切换)

         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中可以看到