ElementPlus 修改主题色和暗黑模式切换_element plus自定义主题

本文讲述根本ElementPlus官方教程配置项目的自定义主题色的两种方法和暗黑模式切换；

 一、主题配置

方案1 --- 动态设置setProperty

       这个方案比较简单，适用于由用户根据颜色面板自行设定各种颜色主题；

1.首先定义一个全局的方法

export const setVarStyle = (key:string,value:any,dom = document.documentElement) => {
  dom.style.setProperty(key, value)
}

2.在根组件App.vue 的onMounted钩子执行，自定义颜色主题；

onMounted(() => {
  setVarStyle('--el-color-primary', '#56AB2F')
  setVarStyle('--el-color-primary-light-9', '#F5FBF0')
  setVarStyle('--el-color-primary-light-3', '#95d475')
})

总结：操作简单（有手就行），可灵活动态修改主题色，但是首屏加载时会相比较慢；

---

方案2 --- 官方方法全局配置主题色

        这个方案就是覆盖Element Plus 默认提供一套主题；

1.在src/styles/ 文件夹下创建一个 index.scss 文件；

在index.scss 里，首先使用 @forward 导入 Element Plus 的变量，再设置elementplus的主题色；

@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
        "primary": ("base": pink),
        "success": ("base": red),
        "warning": ("base": #FF771C),
        "danger": ("base": #ff3030),
        "error": ("base": #ff3030),
        "info": ("base": #9e9e9e),
    ));

这样我们就完成了主题色的覆盖设置，如果某个组件中想使用的话，直接在该组件引入即可

 
<style lang="scss" scoped>
@import "~/styles/element/custom-element.scss";
</style>

2.如果想全局适用的话，需要在main.ts 中引入;

import { createApp } from 'vue'
 
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
import App from './App.vue'
//引入ElMessage 文件样式
//注意：在vite.config.ts 中配置 importStyle 为sass。，这里的ElMessage 的样式也要引入 sass 格式的样式
import "element-plus/theme-chalk/src/message.scss";
 
//后续暗黑模式的引入
import "~/styles/dark.scss";
 
const app = createApp(App)
 
// app.use(ElementPlus)
app.mount('#app')

3.在vite.config.ts 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
const pathSrc = resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    Components({
      // a允许自动加载' ./src/components/ '下的标记组件
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      // include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        ElementPlusResolver({
          //importStyle配置样式引入方式，自动引入修改主题色设置此属性
         // importStyle可以配置element-plus的样式引入方式，它默认是css，利用scss变量修改主题时，需要将这个属性设置为scss
          importStyle: 'sass',
        }),
      ],
      dts: 'src/components.d.ts',
    }),
  ],
  resolve: {
    alias: {
      '~/': `${pathSrc}/`,
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        //自定义的主题文件
        additionalData: `@use "~/styles/index.scss" as *;`,
      },
    },
  }
 
})

4.然后就可以在项目中展示;

---

 

 二、暗黑模式

        因为是通过在html标签上添加 dark 类，可以自行实现切换；但为了方便切换以及进一步的定制化，官方推荐使用 useDark;

1.同上在src/styles/文件夹下创建 dark.scss;

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors:(
           //这里定义在暗黑模式下 primary 的颜色，其他同理
          "primary": ("base": green),
  )
);
 
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

2.在mian.ts 中引入 dark.scss;

import "~/styles/dark.scss";

3.在App.vue 中，引入usedark方法；

<template>
  <div>
    <span @click.stop="toggleDark()">暗黑模式</span>
    <el-switch size="small" v-model="isDark" />
  </div>
</template>
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'
 
const isDark = useDark()
const toggleDark = useToggle(isDark)
 
</script>

4.结果展示；

 拓展：在sass中，@forward 相当于中转站，通过@forward引入scss文件并将引入scss文件中的变量、混合、函数等抛出，当其他scss文件用@use引入此模块时可使用，一般在开源项目中使用较多；