自定义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 小时前
Redux 中间件作用(redux-thunk/redux-saga)
前端·react.js·掘金·金石计划
爱上好庆祝3 小时前
学习JS第十一天(JS的进阶)
前端·javascript·学习
喵个咪4 小时前
统一范式:中后台Admin项目标准化API分层开发方案(Vue/React通用)
前端·vue.js·react.js
Shirley~~4 小时前
figma Mcp
前端·ai编程
Bacon4 小时前
Gstack + Superpowers:当 AI 编程的"脑子"和"手脚"终于在一起了
前端·人工智能
喵个咪4 小时前
拒绝过度封装!GoWind Admin:基于Element Plus重塑中后台CRUD开发范式
前端·vue.js·typescript
Komorebi_99994 小时前
LangChain Day5 课程:Agent 智能代理
前端·langchain·大模型
七牛云行业应用4 小时前
别等了!xAI 的终端编码 Agent 来了——Grok Build 0.1 安装到并行 Agent全流程
前端
Asmewill5 小时前
LangGraph学习笔记三(State)
前端
kisshyshy5 小时前
# 🔥 数组去重:从双重循环到 Set,面试官想听什么?
javascript·面试