自定义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";
相关推荐
文阿花16 分钟前
Echarts实现自定旋转3D饼状图
javascript·3d·echarts·饼状图
San813_LDD27 分钟前
[深度学习] 数据序列化格式对比:以日志级别配置为例
xml·java·前端
meilindehuzi_a1 小时前
深入理解 JavaScript 的同步与异步机制:从单线程设计到 Promise 核心应用
开发语言·javascript·ecmascript
如烟花的信页1 小时前
加速乐cookie逆向分析
javascript·爬虫·python·js逆向
永远的WEB小白1 小时前
css改变svg图标的颜色
前端·javascript·css
lfwh1 小时前
探针程序技术解析:基于 Spring Boot 非 Web 模式的云服务监控告警系统
前端·spring boot·后端
Ajie'Blog1 小时前
AI 周报 | Claude Opus 4.8、Copilot Agent 和 Codex 工作流加速
前端·人工智能·gpt·ai·copilot·ai编程
sugar__salt1 小时前
深入吃透前端线性数据结构:数组、栈、队列、链表核心原理与实战
前端·数据结构·链表
ikoala1 小时前
Codex 不得不装的 12 个插件,都在这了
前端·javascript·后端
道友可好2 小时前
用 Linter 驾驭 AI:机械化执行的艺术
前端·人工智能·后端