vue3设置 element-plus 亮色 / 暗黑色切换

安装Element-plus：

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在 mian.ts 中引入Element-plus：

main.ts 引入element-ui

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

darkLight.vue子组件：

index.vue

base.css

或者全局搜索 :root 在后面加修饰，white代表亮色，dark代表暗黑色，加对应的修饰即可

/* semantic color variables for this project */
:root[data-theme=ligth] {
  --color-background: var(--vt-c-white);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme=dark] {
    --color-background: var(--vt-c-black);
  }
}