自定义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";
相关推荐
非优秀程序员19 分钟前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员24 分钟前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员24 分钟前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员26 分钟前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员35 分钟前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
非优秀程序员36 分钟前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
程序员大阳4 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~5 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马5 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮5 小时前
经典打砖块(Breakout)游戏
前端·css·css3