自定义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";
相关推荐
光影少年12 分钟前
中级前端需要会的东西都有那些?
前端·学习·前端框架
琢磨先生TT19 分钟前
为什么很多后台系统功能不少,看起来却还是很廉价?
前端·vue.js·设计
ekuoleung20 分钟前
量化平台中的 DSL 设计与实现:从规则树到可执行策略
前端·后端
小研说技术26 分钟前
实时通信对比,一场MCP协议的技术革命
前端·后端·面试
kyriewen30 分钟前
React Hooks原理:为什么不能写在if里?揭开Hook的“魔法”面纱
前端·react.js·前端框架
敲代码的彭于晏32 分钟前
Claude Code Token 烧得太快?这8个方案帮你立省90%!
前端·ai编程·claude
可视之道34 分钟前
设备拓扑图中的实时状态映射与动画策略:告警闪烁、流向动画、质量码怎么共存
前端
涂兵兵_青石疏影35 分钟前
绘制图像-clip方法
前端
之歆1 小时前
Day03_HTML 列表、表格、表单完整指南(下)
android·javascript·html
焦糖玛奇朵婷1 小时前
解锁扭蛋机小程序的五大优势
java·大数据·服务器·前端·小程序