自定义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";
相关推荐
Lyda12 小时前
i18n Ally Next:重新定义 VS Code 国际化开发体验
前端·javascript·后端
xiao阿娜的妙妙屋112 小时前
Seedance2.0在哪可以用?自媒体人狂喜!这款AI视频神器我吹爆了
前端
橙序员小站12 小时前
程序员如何做好年夜饭:用系统设计思维搞定一桌硬菜
前端·后端
瞌睡不醒12 小时前
在行情面板中加入 K 线:一次结构升级的实现过程
前端
Flywith2412 小时前
【2025 年终总结】北漂五年,而立,婚礼,折叠车
android·前端·程序员
Aliex_git12 小时前
gzip 压缩实践笔记
前端·网络·笔记·学习
木昆子12 小时前
实战A2UI:从JSON到像素——深入Lit渲染引擎
前端·人工智能
an3174212 小时前
React 页面加载埋点的正确姿势:useEffect 与 document.readyState 完美配合
前端·javascript·react.js
VXbishe13 小时前
基于web的校园失物招领管理系统-计算机毕设 附源码 24150
javascript·vue.js·spring boot·python·node.js·php·html5