vue 主题色切换，黑白切换（less，sass）

本篇文章以less为例，sass可以按照相同逻辑实现。

一、定义css颜色变量。

.white-theme {
    --color-primary: #fff;
}
 
.black-theme {
    --color-primary: #000;
}

--color-primary只会在外层有这个类的情况下，这个变量才会生效。大家使用的使用可以将这些不同主题色的所有颜色值单独存放在不同的css文件中，方便后期维护。

相关说明：

1.--color-primary以--开头的通通被称为css自定义属性。

2.为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

二、定义less颜色变量。

@color-primary: var(--color-primary);

less的变量使用css变量，如果直接用less变量和颜色值是不行的，博主尝试了很多次，最终失败告终。

三、使用less变量。

body{
  background-color: @color-primary;
}

四、切换主题。

document.getElementById("app").className = "white-theme";
document.getElementById("app").className = "black-theme";

有什么问题评论或私信。

其他：动态设置css变量属性。

document.documentElement.style.getPropertyValue('--red') // red
document.documentElement.style.setProperty('--red', 'green') // --red ==> green

推荐文章：

CSS 变量教程 - 阮一峰的网络日志