自定义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 分钟前
react中redux的connect作用是什么
前端·react.js·前端框架
芋头莎莎11 分钟前
基于MQTT通讯UNIapp程序解析JSON数据
前端·uni-app·json
2601_9498477516 分钟前
Flutter for OpenHarmony 剧本杀组队App实战:邀请好友功能实现
开发语言·javascript·flutter
weixin_4365250727 分钟前
若依多租户版: 页面新增菜单, 执行菜单SQL
前端·数据库·sql
FITA阿泽要努力34 分钟前
Agent Engineer-Day 1 初始智能体与大语言模型基础
java·前端·javascript
霸王蟹37 分钟前
Uni-app 跨端开发框架Unibest快速体验
前端·笔记·微信·uni-app·unibest
zihan032137 分钟前
element-plus, el-table 表头按照指定字段升降序的功能实现
前端·vue.js·状态模式
三翼鸟数字化技术团队41 分钟前
watchEffect的两种错误用法
前端·javascript·vue.js
局外人LZ44 分钟前
Decimal.js 完全指南:解决前端数值精度痛点的核心方案
开发语言·前端·javascript
飘若随风1 小时前
JS学习系列-01-什么是JS
开发语言·javascript·学习