自定义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";
相关推荐
黑马程序员毕设38 分钟前
基于微信小程序的二手交易平台设计与实现报告
前端·人工智能·spring boot·后端·考研
cAuth38 分钟前
实现一个图形编辑器
前端·架构·计算机图形学
Nayana1 小时前
《Web 到 HarmonyOS》-- 嵌入 Web 与桥接基础
前端
一拳不是超人1 小时前
之前用 AI 两小时写的塔罗网站,我真把它做上线了,然后呢?
前端·人工智能·程序员
flash俊杰2 小时前
ASR 转写与字幕时间轴:强制对齐、CPS 约束与 SRT 工程化
前端
前端炒粉2 小时前
AI工具面经
前端
唐小码2 小时前
裁员的风刮到了三线荒凉的城市
前端
晚安日记wanna3 小时前
React 为何不做双端 diff?Vue 与 React 更新逻辑的三层差异
前端·react.js·面试
flash俊杰3 小时前
AI 分段引擎与自动剪辑决策:从语义片段到时间线草稿的映射
前端·ai编程