更换页面主题颜色
css中是存在变量的,但是兼容性不是理想,可以配合js完成页面主题颜色切换功能,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
/* -- 符号为css中声明变量 */
--themeColor: #000;
--borderColor: #fbb50e;
}
.box {
width: 100px;
height: 100px;
/* var() 使用变量 */
background-color: var(--themeColor); /* 设置背景色 */
border: 5px solid var(--borderColor); /* 设置边框颜色 */
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="fun()">变更主题颜色</button>
<script>
function fun(){
// 修改变量中的颜色
document.body.style.setProperty('--themeColor', '#ff0000');
document.body.style.setProperty('--borderColor', '#350efb');
}
</script>
</body>
</html>
修改主题颜色的方式有很多,如果可以不考虑浏览器的兼容性,这种办法是比较简单的