这个方案就是覆盖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), "...
按需自定义主题色配置 Elbutton 安装完后,修改 vite.config.js 文件 vite.config.js import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// 第一种方法:使用 unplugin-vue-components// import AutoImport from 'unplugin-auto-import/vite'// import Components from 'unplugin-vue-components/vit...
elementPlus修改主题颜色(含暗夜模式切换) 直接调用 setThemeColor(color) 函数,color为传入的主题颜色 exportfunctionsetThemeColor(color) {constel =document.documentElement;constbody =document.querySelector("body");// const nprogress = document.querySelector("#nprogress .bar");// console.log(nprogress...
1. 理解 Element-Plus 的主题定制机制 Element-Plus 允许通过覆盖其默认的 SCSS 变量来自定义主题颜色。这意味着你需要熟悉 SCSS(Sass 的一个语法)以及如何使用它来修改预定义的样式变量。 2. 准备自定义的主题颜色方案 首先,确定你想要更改的颜色,例如主色、成功色、警告色等。这些颜色可以用 HEX、RGB 或 RGBA...
),'error': (// 错误色'base':#cf4444, ), ), ); 3.确认在main.js中有如下配置 import'./assets/main.css'// import './styles/element/index.scss'import{ createApp }from'vue'import{ createPinia }from'pinia'importElementPlusfrom'element-plus'importAppfrom'./App.vue'importrouterfrom'./rou...
element-plus官网给的方案是在html上添加dark类名,在项目中创建个响应变量去修改css变量,可以添加很多种配色方案吧。 document.querySelector(':root').computedStyleMap().get("--el-text-color-primary") 补充element-plus网站的代码 (() => { const e = localStorage.getItem("el-theme-appearance"); (e...
配置资源路径"@/": `${path.resolve(__dirname, "src")}/`,},},css: {preprocessorOptions: {scss: {// 自定义的主题色additionalData: `@use "@/styles/element/index.scss" as *;`,},},},plugins: [vue(),// 自动引入AutoImport({resolvers: [ElementPlusResolver({// 自动引入修改主题色添加...
首先在代码中引入use-element-plus-theme并设置默认的主题色: import{useStorage}from'@vueuse/core';import{useElementPlusTheme}from'use-element-plus-theme';constlayoutThemeColor=useStorage('layout-theme-color','#243db9');// 默认主题色const{changeTheme}=useElementPlusTheme(layoutThemeColor.value);//...
'error':( //错误色 'base':#cf4444, ), )); 2.在vite.config.js配置中导入scss文件类型 plugins: [ vue(), viteMockServe({ mockPath: "mock", localEnabled: true, }), // element-plus配置 AutoImport({ resolvers: [ElementPlusResolver()], ...