在body 里面写一个公共的样式颜色
body { --themeColor: #ff9c6e; }
这句话的作用是设置你的默认主题色。--themeColor是自定义的名字,#ff9c6e 后边的颜色也是自定义;大家可以随便写。
然后在其他样式里面 引用这个颜色 var(--themeColor)
.liu_div{
line-height: 30px;
background-color: var(--themeColor);
}
.liu_box{
color: var(--themeColor);
}
最后就可以实现 只改变 body里面的 themeColor: #ff9c6e; 的颜色就可以同时改变其他的背景和字体颜色
背景渐变的实现方式是:只用改变这个背景颜色的透明度
//背景渐变
.liu_box{
background: linear-gradient(180deg, var(--themeColor) 60%, var(--themeColor) 100%);
}
.js调用setProperty进行颜色值的控制,核心代码
document.body.style.setProperty('--themeColor', this.$store.state.home.themeColor)