ElementPlus 修改主题色和暗黑模式切换

本文讲述根本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),));

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

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变量修改主题时，需要将这个属性设置为scssimportStyle: '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方法；

4.结果展示；

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！