一、简介

若依框架中对左侧菜单有集成的light和dark模式，如果需要添加新的菜单主题样式和背景色，下面的内容或许能提供帮助。效果示例图：

二、环境

若依vue3版本

源码地址：https://gitee.com/y_project/RuoYi-Cloud

RuoYi-Cloud: 🎉 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统，同时提供了 Vue3 的版本

三、模仿原有集成方法

1，步骤一：切换左侧菜单地方的代码是在src/layout/Setting/index.vue；

通过绑定handleTheme方法传入相应的主题名称，然后赋值给sideTheme，并存入localStorage内。

那么我们就模仿同样的结构新增一些结构，效果如下面展示：

2，步骤二：分析如何实现切换背景色

当你点击原本切换的时候，观察sidebar元素的标签，会发生变化，变化的正是刚刚绑定handleTheme方法传入的主题名称。

所以我们就可以去找sidebar在的文件：layout/components/sidebar/index.vue

绑定的方法是这个：

可以在里面打印一下，验证自己新增的那些主题名称是否有传入成功；

如果成功了，那就简单多了，我们就可以通过判断class名称来给sidebar添加不同的样式和背景啦。

3，步骤三：设置不同主题下的不同背景颜色和样式

sidebar的样式文件在src/assets/styles/sidebar.scss

然后就可以这样设置里面的样式就可以啦，记得用!important

另外，variables.modules.scss文件里面是放一些公共的样式或者颜色；用$定义的颜色需要用:export导出。

4，步骤四：切换整体背景图

也是同样的思路，在App.vue里面套一个div，动态绑定class名称，如上所示。

然后在assets/styles/index.scss文件里写相应主题class下的样式即可。

四、总结

大体的思路已经结束了，至于具体样式就不多说了，根据自己的需求改就行了。大功告成，学废了吗！