Element Plus暗黑模式及模式自由切换的实现

npm install element-plus --save

// /src/main.js
import { createApp } from 'vue'
import App from './App.vue'

//引入路由器组件
import { router } from './router/index'

//引入样式
import "./styles/index.scss"

//引入windicss
import 'virtual:windi.css'

//引入pinia
import { createPinia } from 'pinia';
const pinia = createPinia();

const app = createApp(App)

app.use(router)

app.use(pinia)

//挂在容器
app.mount('#app')

// src/styles/element/light.scss 可以忽略重写 将element的默认样式定义为light
/* 重写 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);
// 导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;

// src/styles/element/drak.scss 暗黑模式
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
    $colors: (
        'primary': (
          'base': green,
        ),
      ),
);
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

// src/styles/index.scss  顺序不要错  一定要是先默认主题  再暗黑主题 这里官网有说明
// 参开链接  https://element-plus.org/zh-CN/guide/dark-mode.html
/*
自定义变量​
通过 CSS​
直接覆盖对应的 css 变量即可
像这样，新建一个 styles/dark/css-vars.css文件:
css
html.dark {
  --el-bg-color: #626aef;
}
在 Element Plus 的样式之后导入它

ts
// main.ts
*/
@use './element/light.scss' as *;
@use './element/dark.scss' as *;
@use './element/self.scss' as *;    

 npm install pinia

// src/store/theme.js
import { defineStore } from 'pinia';
import { watchEffect } from 'vue';

export const useThemeStore = defineStore('theme', {
  state: () => ({
    isDarkTheme: false
  }),
  actions: {
    toggleDarkMode() {
      this.isDarkTheme =!this.isDarkTheme;
    },
    setupThemeWatcher() {
      const htmlElement = document.documentElement;
      watchEffect(() => {
        htmlElement.classList.toggle('dark', this.isDarkTheme);
        htmlElement.classList.toggle('light',!this.isDarkTheme);
      });
    }
  }
});

//src/pages/components/ThemeSwitch.vue
<template>
    <el-switch v-model="themeStore.isDarkTheme" active-text="普通模式" inactive-text="暗黑模式" inline-prompt />
</template>
  
<script setup lang='ts'>
import { useThemeStore } from '@/store/theme'; 

const themeStore = useThemeStore();

themeStore.setupThemeWatcher();
  </script>
  <style scoped lang='scss'>
  
  </style>

<template>
  <div>
    <h2>我是登录页面</h2>
    <theme-switch></theme-switch>
  </div>
</template>

<script setup lang='ts'>
import DarkModeSwitch from 'components/ThemeSwitch.vue';
</script>

<style scoped lang='scss'>
</style>

/vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// element plus 相关
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import WindiCSS from 'vite-plugin-windicss'

import path from 'path';
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    WindiCSS(),
    vue()
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use 'src/styles/element/define.scss' as *;`
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'pages': path.resolve(__dirname, './src/pages'),
      'components': path.resolve(__dirname, './src/pages/components'),
    },
  },
})

//jsconfig.json 如果文件不存在 那么就创建该文件即可
{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "pages/*": ["src/pages/*"],
        "components/*": ["src/pages/components/*"]
      }
    }
  }