Element Plus暗黑模式及模式自由切換的實現(xiàn)

更新時間：2024年11月08日 09:34:50 作者：狂愛代碼的碼農(nóng)

本文詳細介紹了如何在使用Vite構(gòu)建的Vue項目中實現(xiàn)ElementPlus暗黑模式及模式切換,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

環(huán)境介紹

使用vite構(gòu)建vue項目

1、安裝element plus依賴

npm install element-plus --save

2、使用element plus組件及導入樣式

// /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')

3、element plus 樣式文件

// 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  順序不要錯  一定要是先默認主題  再暗黑主題 這里官網(wǎng)有說明
// 參開鏈接  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 *;

4、安裝pinia 用來保存切換模式的狀態(tài)

 npm install pinia

5、配置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);
      });
    }
  }
});

6、創(chuàng)建模式切換的組件

//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>

7、使用

<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>

關(guān)于vite的配置

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

// element plus 相關(guān)
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 如果文件不存在 那么就創(chuàng)建該文件即可
{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "pages/*": ["src/pages/*"],
        "components/*": ["src/pages/components/*"]
      }
    }
  }

到此這篇關(guān)于Element Plus暗黑模式及模式自由切換的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element Plus暗黑模式及模式自由切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: