vue 使用 css/less 动态更换主题色

.css

.drak-theme {
    --color-primary: #000000;
}

.light-theme {
    --color-primary: pink;
}

在使用的地方动态切换的class（light-theme、drak-theme），与css定义的class一致

document.getElementById("app").className = "light-theme";
document.getElementById("app").className = "drak-theme";

一、全局引入css文件，在style中使用

<style lang="less">
.button {
  background-color: var(--color-primary);
}
</style>

二、在less中引入css文件，全局引入less

@import 'common.css';
@color-primary: var(--color-primary);

在style中使用

<style lang="less">
.button {
  background-color: @color-primary;
}
</style>