思路:想要动态修改主题颜色,需要后端接口返回颜色值,通过js设置style变量,然后再通过CSS variable的方式来给元素属性赋值
CSS variable的实现方式
CSS variable 允许我们在 css 里面声明变量,在变量前加上两根小横线即可(--)
需要注意的是css vars变量声明,区分大小写,用法如下:
p{
color:var(--foo)
}
通过js设置style变量
这里我们需要用到 document.body.style 的api
// 设置变量
document.body.style.setProperty('--foo', '#369')
// 读取变量
document.body.style.getPropertyValue('--foo')
// 删除变量
document.body.style.removeProperty('--foo')