访问Element Plus 主题生成器。 根据需要调整颜色,并生成 CSS 文件。 将生成的 CSS 文件引入到你的项目中。 4. 使用 unplugin-element-plus 和Vite 如果你使用的是 Vite,可以使用 unplugin-element-plus 插件来更方便地配置主题。 步骤: 安装unplugin-element-plus 和sass: bash npm install unplugin-element-...
这个方案就是覆盖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), "...
}),Components({resolvers: [ElementPlusResolver()], }), ] }) 2.创建自定义主题颜色文件,统一在src\styles\element\index.scss中 @forward'element-plus/theme-chalk/src/common/var.scss'with ( $colors: ('primary': (// 主色'base':#1b8d74, ),'success': (// 成功色'base':#1dc779, ),'w...
解决问题 在修改主色的时候将对应的其他CSS变量进行变亮或者变暗即可。一般这种主题都是会存储浏览器Storage中,可以结合实际情况配合vuex或者pinia使用。
elementPlus修改主题颜色(含暗夜模式切换) 直接调用 setThemeColor(color) 函数,color为传入的主题颜色 exportfunctionsetThemeColor(color) {constel =document.documentElement;constbody =document.querySelector("body");// const nprogress = document.querySelector("#nprogress .bar");// console.log(nprogress...
按需自定义主题色配置 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...
首先在代码中引入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()], ...
配置资源路径"@/": `${path.resolve(__dirname, "src")}/`,},},css: {preprocessorOptions: {scss: {// 自定义的主题色additionalData: `@use "@/styles/element/index.scss" as *;`,},},},plugins: [vue(),// 自动引入AutoImport({resolvers: [ElementPlusResolver({// 自动引入修改主题色添加...