vue3+elementUiplus开发的项目如何修改公共标签的默认颜色

修改elementUiplus路由菜单栏默认颜色,

最新推荐文章于 2025-10-11 09:41:04 发布

原创最新推荐文章于 2025-10-11 09:41:04 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在使用elementUiplus开发时，若需更改路由菜单栏的颜色，可以着重关注变量如`var(--el-menu-bg-color)`。文章指导用户在`index.scss`文件中修改样式，通过调整`--el-color-primary`等主题色变量实现颜色定制，从而达到自定义界面色彩的效果。

背景:使用elementUiplus开发路由菜单栏需要更改默认颜色

步骤:
查看用到的变量如:var(–el-menu-bg-color);
修改:
在这里插入图片描述
index.scss文件下进行style的修改

:root {
  --el-color-primary: #0cba80 !important; // 主题色
  --el-color-primary-dark-2: #0cba80 !important;
  --el-color-primary-light-3: #0cba80 !important;
  --el-color-primary-light-5: #b3e19d !important;
  --el-color-primary-light-7: #d1edc4 !important;
  --el-color-primary-light-8: #e1f3d8 !important;
  --el-color-primary-light-9: #f0f9eb !important;
  --el-font-weight-primary: 400 !important;
}