vue3 开启暗黑模式

 main.js引入

//暗黑模式样式 1
import 'element-plus/theme-chalk/dark/css-vars.css'

页面使用

<template>
   
    
        <el-switch
          v-model="switchvalue"
          @change="changeswitch"
          size="small"
          active-text="开启模式"
          inactive-text="关闭模式"
        />
      
 
</template>
<script setup>
import { ref } from 'vue'
 

let switchvalue = ref(false)

//3 添加方法
const changeswitch = () => {
  //获取根节点
  let html = document.documentElement
  console.log(switchvalue.value)
  //判断
  switchvalue.value ? (html.className = 'dark') : (html.className = '')
}
</script>