自定义elementui的主题

通常情况下,我们使用elementui框架的时候默认组件的主题都是白色的,比如:

但是如果想自定义主题,改变主题颜色,以及各种默认颜色,其实也不难:

  • 配置默认主题,选好后点击下载

  • 在vue项目的main.js同级目录下新建一个文件:elemen-variables.scss

  • -打开config.json文件,将样式属性复制到elemen-variables.scss,但是格式会有变化,例如:

bash 复制代码
/* 自定义主题色变量 */
$--color-white:#0F045B;
$--color-text-regular:#FFFFFF;

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
相关推荐
Hilaku15 分钟前
从搜索排名到 AI 回答? 先聊一聊 AI 可见度工具 BuildSOM !
前端·javascript·程序员
zzmgc416 分钟前
纯静态 + Web Worker + 虚拟滚动:我是怎么让浏览器吃下 10MB JSON 不卡的
前端·架构
辰同学ovo18 分钟前
用 Chrome DevTools MCP 给 AI 写的页面做“质检“
前端·人工智能·chrome devtools
乌托邦25 分钟前
uni-mini-ci:让 uniapp 小程序构建后自动预览和上传
前端·vue.js·uni-app
豹哥学前端35 分钟前
前端工程化实战:从包管理到 Vite 配置,一套下来全明白
前端·javascript·vite
网安小白39 分钟前
如果解决github域名解析问题
前端
葬送的代码人生1 小时前
用一句 Prompt 十分钟搓出完整应用
前端·html·ai编程
干中学_20261 小时前
vue3 画布编辑器「平移」天坑?只需 5 行代码,完美优雅复刻大厂体验!
javascript
ShiJiuD6668889991 小时前
大事件板块三
前端·bootstrap·html
JavaAgent架构师1 小时前
前端AI工程化(五):AI对话状态管理
前端·人工智能