自定义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";
相关推荐
山依尽7 分钟前
如何将一个 React SPA 项目迁移到 Next.js 服务端渲染
前端·next.js
12 分钟前
使用 svgfmt 优化 SVG 图标
前端·svg·icon
Watermelo61712 分钟前
href 和 src 有什么区别,它们对性能有什么影响?
前端·javascript·vue.js·性能优化·html·html5·用户体验
hqk21 分钟前
鸿蒙零基础语法入门:开启你的开发之旅
android·前端·harmonyos
AAA阿giao23 分钟前
大厂面试之反转字符串:深入解析与实战演练
前端·javascript·数据结构·面试·职场和发展·编程技巧
专业抄代码选手30 分钟前
告别“屎山”:用 Husky + Prettier + ESLint 打造前端项目的代码基石
前端
想进字节冲啊冲42 分钟前
Vibe Coding 实战指南:从“手写代码”到“意图设计”的前端范式转移
前端·ai编程
离&染1 小时前
宝塔nginx一个域名部署两个前端和两个后端(VUE3)
前端·nginx
朱哈哈O_o1 小时前
前端通用包的作用——md5篇
前端
Lsx_1 小时前
🔍 React 有 useAntdTable,Vue3 怎么办?自封一个 useTable!
前端·javascript·vue.js