这个方案就是覆盖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), "...
如果一切顺利,你应该能看到按钮的主题颜色和字体大小已经按照你在element-variables.scss中定义的值进行了修改。 通过以上步骤,你就可以在Vue 3 + TypeScript + Vite项目中全局修改Element Plus的默认主题颜色和字体大小了。
element-plus色系 其实我希望自己的主题颜色是绿色。success的几个绿色就很不错,所以我可以直接在elementplus.css中写入 :root { --el-color-primary: var(--el-color-success); --el-color-primary-light-3: var(--el-color-success-light-3); --el-color-primary-light-5: var(--el-color-success-li...
其主要通过给html动态的添加一个dark类。 回到顶部 主要要通过dom获取html标签,然后给html标签设置className 回到顶部 需要在main.ts中引入dark所在的css文件: 具体可以参考element Plus的官网
element-plus自定义弹框头背景色 1. 效果如下: 弹框头部定制背景色;关闭按钮和标题对齐;鼠标悬浮关闭按钮颜色变浅。 2. 用到element-plus版本: ""2.7.6", 3.具体思路: 整个弹框的背景色改成蓝色,padding:0; header、body、footer背景色改成白色,字体黑色不变;padding给20px;...
按需自定义主题色配置 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...
首先在代码中引入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()], ...