自定义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 小时前
Web Components:未来的前端组件化标准?
前端
果汁华1 小时前
Chrome DevTools MCP:让 AI 编码助手拥有浏览器调试超能力
前端·人工智能·chrome devtools
二月龙2 小时前
移动端适配必杀技:Viewport与响应式布局全解
前端
大萝卜呼呼2 小时前
Next.js第十七课 - 部署
前端·typescript·next.js
只会写Bug2 小时前
后台管理项目中关于新增、编辑弹框使用的另一种展示形式
前端·vue.js
lion102 小时前
简单Canvas指纹示例
javascript
weixin199701080162 小时前
《废旧物资商品详情页前端性能优化实战》
前端·性能优化
用户52709648744902 小时前
Vite 开发代理里的 `ws` 是什么,什么时候该开
前端
冰水不凉2 小时前
robot_localization实现imu和odom融合
前端·slam
M ? A2 小时前
Vue v-bind 转 React:VuReact 怎么处理?
前端·javascript·vue.js·经验分享·react.js·面试·vureact