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/lunbo@3x.png") no-repeat no-repeat;//背景图
    ...
}

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

:root {
    --backgroundColor:red;//主题背景颜色
    --contentTitleColor:#fff;//标题文本颜色
    --contentTextColor:#fff;//内容文本颜色
    --backgroundUrl: url("../assets/lunbo@3x.png") no-repeat no-repeat;//背景图
    ...
}

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

:root {
    --backgroundColor:yellow;//主题背景颜色
    --contentTitleColor:blue;//标题文本颜色
    --contentTextColor:blue;//内容文本颜色