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

2023-03-24 03:42| 来源: 网络整理| 查看: 265

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

【本文地址】

今日新闻