APP Vue项目如何实现多种背景主题或皮肤切换功能

需求：当App选择不同的皮肤，页面随之发生相应的换肤效果

把需要更换的css样式提取出来，主要有：
1、主色调：背景颜色，文本字体颜色
2、logo、一些背景图
3、一些操作按钮的颜色
4、一些menu和小图片

第一步：新建主题皮肤样式文件

在style文件夹下新建theme-switch主题切换文件夹

默认主题颜色的theme.less代码如下：

:root {
    --backgroundColor:#fff;//主题背景颜色
    --contentTitleColor:#333;//标题文本颜色
    --contentTextColor:#999;//内容文本颜色
    --backgroundUrl: url("../assets/[email protected]") no-repeat no-repeat;//背景图
    ...
}

主题颜色1 themeOne.less代码如下：

:root {
    --backgroundColor:red;//主题背景颜色
    --contentTitleColor:#fff;//标题文本颜色
    --contentTextColor:#fff;//内容文本颜色
    --backgroundUrl: url("../assets/[email protected]") no-repeat no-repeat;//背景图
    ...
}

主题颜色2 themeTwo.less代码如下：

:root {
    --backgroundColor:yellow;//主题背景颜色
    --contentTitleColor:blue;//标题文本颜色
    --contentTextColor:blue;//内容文本颜色
    --backgroundUrl: url("../assets/[email protected]") no-repeat no-repeat;//背景图
    ...
}

主题颜色3 themeThree.less代码如下：

:root {
    --backgroundColor:green;//主题背景颜色
    --contentTitleColor:yellow;//标题文本颜色
    --contentTextColor:yellow;//内容文本颜色
    --backgroundUrl: url("../assets/[email protected]") no-repeat no-repeat;//背景图
    ...
}

在SPA单页面中使用方法如下：

第二步：实现触发功能按钮

为了保持当前页面样式保持一致，在此我选用的是Vant-UI的Collapse 折叠面板效果，默认样式如下：

点击”主题切换“按钮后效果如下：（灰色背景按钮显示为当前选中的主题皮肤）

第三步：根据全局变量中存储的不同主题皮肤值按需导入主题样式

我把该方法写在APP.vue文件里面，如果你们有自己封装底层的方法，也可以视项目情况而定

APP.vue文件中的代码如下:

温馨提示：由于涉及到公司信息安全问题，在此我就不上传页面实际页面切换效果了，需要的大佬们可以自行写个dome进行测试，上述笔记如有不足之处，还望多多指点。