自定义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";
相关推荐
枣把儿9 分钟前
开源!全套公众号写作、封面、发布自动化工具包!
前端·命令行
志尊宝12 分钟前
AI原生前端开发(031):AI辅助的性能分析与瓶颈定位
javascript·人工智能·ai-native
陶醉的松鼠12 分钟前
前端容易忽略的 debugger 调试技巧
前端
我命由我1234513 分钟前
6-3.Python 异常处理 - 异常处理进阶(else 块与 finally 块、异常传递、自定义异常)
开发语言·前端·数据库·后端·python·学习·java-ee
龙九山17 分钟前
我的 10 个 npm 插件,差点被 AI 判了死刑
前端·开源
deli00719 分钟前
键盘按键测试:按下就点亮,keydown 延迟精确到 1 毫秒
前端
adinnet202620 分钟前
持续智能问数:多轮对话状态管理、下钻钻取与经营驾驶舱的演进
javascript·数据库·人工智能
FYKJ_201023 分钟前
springboot高考志愿填报推荐系统14332-计算机课程设计、毕业设计
javascript·spring boot·python·架构·django·课程设计·高考
Amos_Web26 分钟前
通过 Rspack 源码学 Rust(三):用 Default 与 std::mem::take 取出字段所有权
前端
全栈若城34 分钟前
从源码拆解一个 AIUI 每日一词智能体:页面、离线索引与硬件交互
javascript