自定义饿了么主题色，elementUI皮肤、色系、主题、主色调

原创已于 2024-08-05 09:09:21 修改 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

文章标签：

#elementUI皮肤 #elementUI主题 #elementUI主色调 #elementUI色系 #elementUI Skin

于 2022-04-09 23:00:43 首次发布

Vue.js 同时被 2 个专栏收录

306 篇文章

订阅专栏

Sg.js框架

235 篇文章

订阅专栏

本文介绍如何使用Element UI框架自定义主题颜色。通过安装并配置特定插件或直接使用在线工具，用户可以轻松更改按钮和复选框等元素的颜色，实现个性化界面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/theme先打开上面的地址

如果上面的网址报错可以打开

https://chromewebstore.google.com/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmimhttps://chromewebstore.google.com/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim添加主题插件到chrome浏览器

或打开下面链接，设置自定义主题色

theme-chalk-previewhttps://elementui.github.io/theme-chalk-preview/#/zh-CN

点击下载

复制“theme”文件夹到src/css/下面

在main.js里面加入

...

 //【第三方插件】----------------------------------------------------------------
 //引入饿了么UI框架【安装方法】cnpm i element-ui -S
 import ElementUI from 'element-ui';
 //  import 'element-ui/lib/theme-chalk/index.css';
 import '../css/theme/index.css';//这句话是重点
 Vue.use(ElementUI);

...

然后运行查看就发现按钮、复选框都变成了新的主题主色调了