基于less

1. 引入less.js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

1. 引入对应的less文件

@primaryColor: red;

.color{
    color: @primaryColor;
}

1. 通过less.modifyVars动态修改变量

less.modifyVars({
    '@primaryColor': 'blue'
})

1. webpack 配置如下

{
      test: /\.less$/,
      loader: 'less-loader',
      options: {
          javascriptEnabled: true // 需要配置这个
      }
}

通过setProperty的方式

body {
    --primaryColor: red;
    --primaryBgColor: yellow;
}

.page{
    color: var(--primaryColor);
    background: var(--primaryBgColor)
}

// 修改主题的时候
document.body.style.setProperty('--primaryColor', 'blue')

document.body.style.setProperty('--primaryBgColor', 'red')