html css控制切换主题颜色（背景色、字体颜色）

在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)