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

最新推荐文章于 2025-04-18 20:26:12 发布

Study123wf

最新推荐文章于 2025-04-18 20:26:12 发布

阅读量2k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Study123wf/article/details/131570567

版权

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

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

背景:使用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;
}