h5界面切换皮肤

最新推荐文章于 2024-09-08 21:36:12 发布

奶昔不会射手

最新推荐文章于 2024-09-08 21:36:12 发布

阅读量106

点赞数 1

文章标签：前端 css

本文链接：https://blog.csdn.net/lth002/article/details/140958350

版权

实现原理是应用css3新特性 :root和--xxx以及var(--xxx)来实现，直接看代码

//mytest.css
//theme是随便定义的，abc也行
:root[theme="dark"]{
	//主题色
	--main-color:#00deff
}
:root[theme="light"]{
	//主题色
	--main-color:#42eb82
}

//通过js来控制theme的值，来实现样式的切换
//至于背景图之类的，就全局通信来动态修改
  if (isLight) { //根据实际情况来更改值
        document.documentElement.setAttribute('theme', 'light')
    } else {
        document.documentElement.setAttribute('theme', 'dark')
    }