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

body { --themeColor: #ff9c6e; }

这句话的作用是设置你的默认主题色。–themeColor是自定义的名字，#ff9c6e 后边的颜色也是自定义；大家可以随便写。
然后在其他样式里面 引用这个颜色  var(–themeColor)

1. .liu_div{
2.             line-height: 30px;
3.             background-color: var(–themeColor);
4.         }
6. .liu_box{
7.              color: var(–themeColor);
8.         }

最后就可以实现 只改变 body里面的 themeColor: #ff9c6e; 的颜色就可以同时改变其他的背景和字体颜色
背景渐变的实现方式是：只用改变这个背景颜色的透明度

1. 1. //背景渐变 
   3. .liu_box
   5. background: linear–gradient(180deg, var(–themeColor) 60%, var(–themeColor) 100%);
   7. }

.js调用setProperty进行颜色值的控制，核心代码

document.body.style.setProperty('--themeColor', this.$store.state.home.themeColor)