Element Plus dark mode and free mode switching implementation

npm install element-plus --save

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

//Introduce router componentsimport { router } from './router/index'

//Introduce styleimport "./styles/"

//Introduce windicssimport 'virtual:'

//Introduce piniaimport { createPinia } from 'pinia';
const pinia = createPinia();

const app = createApp(App)

(router)

(pinia)

//Hang in the container('#app')

// src/styles/element/ can be ignored to define the default style of element as light/* Rewrite */
@forward 'element-plus/theme-chalk/src/common/' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);
// Import all styles:@use "element-plus/theme-chalk/src/" as *;

// src/styles/element/ Dark Mode@forward 'element-plus/theme-chalk/src/dark/' with (
    $colors: (
        'primary': (
          'base': green,
        ),
      ),
);
@use 'element-plus/theme-chalk/src/dark/' as *;

// src/styles/ Don't be wrong in the order. Be sure to default the theme first and then dark theme. There is an explanation on the official website here.//See the link /zh-CN/guide//*
 Custom variables
 By CSS​
 Just overwrite the corresponding css variables directly
 Like this, create a new styles/dark/ file:
 css
  {
   --el-bg-color: #626aef;
 }
 Import it after the Element Plus style

 ts
 //
 */
@use './element/' as *;
@use './element/' as *;
@use './element/' as *;    

 npm install pinia

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

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

//src/pages/components/
<template>
    <el-switch v-model="" active-text="Normal Mode" inactive-text="Dark Mode" inline-prompt />
</template>
  
<script setup lang='ts'>
import { useThemeStore } from '@/store/theme'; 

const themeStore = useThemeStore();

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

<template>
  <div>
    <h2>I'm the login page</h2>
    <theme-switch></theme-switch>
  </div>
</template>

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

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

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

// element plus relatedimport 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';
// /config/
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    WindiCSS(),
    vue()
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use 'src/styles/element/' as *;`
      }
    }
  },
  resolve: {
    alias: {
      '@': (__dirname, './src'),
      'pages': (__dirname, './src/pages'),
      'components': (__dirname, './src/pages/components'),
    },
  },
})

// If the file does not exist, then create the file{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "pages/*": ["src/pages/*"],
        "components/*": ["src/pages/components/*"]
      }
    }
  }