自定义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";
相关推荐
风止何安啊2 分钟前
为什么要有 TypeScript?让 JS 告别 “薛定谔的 Bug”
前端·javascript·面试
一蓑烟雨,一任平生27 分钟前
鸿蒙H5调试方法
前端·华为·h5·harmonyos
Canace40 分钟前
使用大模型来维护知识库
前端·人工智能
HashTang40 分钟前
用自然语言驱动的开源 3D 建筑设计编辑器-Aedifex
前端·github·ai编程
海天鹰1 小时前
SOC架构
javascript
0vvv01 小时前
2026-NCTF-web-N-RustPICA
前端·ctf
前进的李工1 小时前
MySQL角色管理:权限控制全攻略
前端·javascript·数据库·mysql
芯智工坊1 小时前
第13章 Mosquitto监控与日志管理
前端·网络·人工智能·mqtt·开源
NPE~2 小时前
[App逆向]环境搭建下篇 — — 逆向源码+hook实战
android·javascript·python·教程·逆向·hook·逆向分析
洒满阳光的庄园2 小时前
Electron 桌面端打包流程说明
前端·javascript·electron