自定义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";
相关推荐
利刃大大1 小时前
【Vue】Vue2 和 Vue3 的区别
前端·javascript·vue.js
Lhuu(重开版1 小时前
JS:正则表达式和作用域
开发语言·javascript·正则表达式
荔枝一杯酸牛奶2 小时前
HTML 表单与表格布局实战:两个经典作业案例详解
前端·html
Charlie_lll3 小时前
学习Three.js–纹理贴图(Texture)
前端·three.js
yuguo.im3 小时前
我开源了一个 GrapesJS 插件
前端·javascript·开源·grapesjs
安且惜3 小时前
带弹窗的页面--以表格形式展示
前端·javascript·vue.js
摘星编程4 小时前
用React Native开发OpenHarmony应用:NFC读取标签数据
javascript·react native·react.js
GISer_Jing4 小时前
AI驱动营销:业务技术栈实战(From AIGC,待总结)
前端·人工智能·aigc·reactjs
GIS之路6 小时前
GDAL 实现影像裁剪
前端·python·arcgis·信息可视化
AGMTI6 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript