自定义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";
相关推荐
叫我一声阿雷吧3 分钟前
【JS实战案例】实现图片懒加载(基础版)原生JS+性能优化,新手可直接复现
开发语言·javascript·性能优化·js图片懒加载
colicode9 分钟前
语音提醒接口开发方案:日程安排与待办事项自动电话提醒的集成思路
前端·前端框架·语音识别
爱上妖精的尾巴35 分钟前
8-8 WPS JS宏 正则表达式 字符组与任选
java·服务器·前端
山岚的运维笔记1 小时前
SQL Server笔记 -- 第34章:cross apply
服务器·前端·数据库·笔记·sql·microsoft·sqlserver
前端程序猿i1 小时前
第 8 篇:Markdown 渲染引擎 —— 从流式解析到安全输出
开发语言·前端·javascript·vue.js·安全
coding随想1 小时前
告别构建焦虑!用 Shoelace 打造零配置的现代 Web 应用
前端
css趣多多1 小时前
resize.js
前端·javascript·vue.js
_codemonster2 小时前
java web修改了文件和新建了文件需要注意的问题
java·开发语言·前端
小冰球2 小时前
前端侦探:我是如何挖掘出网站里 28 个"隐藏商品"的?
前端·vue.js
3秒一个大2 小时前
深入解析 React 回到顶部(BackToTop)组件的实现与设计
前端·react.js·typescript