vue动态切换主题色

1,style文件中新建一个theme.json用来进行主题样式存储

{
    "blue": {
        "--themeColor": "#1eafc5",
        "--menuText": "#bfcbd9",
        "--subMenuActiveText": "#f4f4f5",
        "--menuHover": "rgba(31,197,212,0.3)",
        "--banner": "url(../../../../static/banner_1.jpg)",
    },
    "green": {
        "--themeColor": "#43AF50",
        "--menuText": "#bfcbd9",
        "--subMenuActiveText": "#f4f4f5",
        "--menuHover": "#A6D6A7",
        "--banner":"url(../../../../static/banner.jpg)",
    }
}

2，style中新建configColor.js用来设置主题

// 主题样式
import themes from './theme.json'

export function addColor(init) {
    let keys = ['blue','green']
    const obj = themes[keys.indexOf(init) != -1 ? init :'green']
    console.log(obj);
    // html 添加主题样式
    for (const key in obj) {
        document.documentElement.style.setProperty(key, obj[key]);
    }
}

3，main中调用addColor()方法添加主题样式

// main.js

//也可以在router.beforeEach页面跳转之前进行调用，看项目需求。 在主题切换事件中调用addColor(‘主题属性’)方法
import { addColor } from '../src/common/style/addcolor';
addColor()

3，css中使用

<style lang="less" scoped>
 .box{
  background: var(--banner);
 }
</style>