自定义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";
相关推荐
想睡好几秒前
setup
前端·javascript·html
桜吹雪7 分钟前
DeepSeekV3.2模型内置Agent体验
javascript·人工智能
逆向新手10 分钟前
js逆向-某省特种设备aes加密研究
javascript·爬虫·python·逆向·js
光影少年12 分钟前
react navite相比较传统开发有啥优势?
前端·react.js·前端框架
岁月宁静12 分钟前
软件开发工程师如何借助 AI 工具进行软件自测
前端·ai编程·测试
我爱学习_zwj16 分钟前
动态HTTP服务器实战:解析请求与Mock数据
开发语言·前端·javascript
NMBG2217 分钟前
外卖综合项目
java·前端·spring boot
小白阿龙17 分钟前
样式不生效/被覆盖(CSS优先级陷阱)
前端·css
flashlight_hi19 分钟前
LeetCode 分类刷题:110. 平衡二叉树
javascript·算法·leetcode
Beginner x_u21 分钟前
Vue 事件机制全面解析:原生事件、自定义事件与 DOM 冒泡完全讲透
前端·javascript·vue.js·dom