前端实现页面换肤功能

/**
项目背景切换设计;默认明亮模式，如果需要切换到暗黑模式只需要在设置<body mode="dark"></body>
*定义根dom body下的css变量
*/

// 明亮模式颜色设置
body {
--font-color: #fff;
}
页面中通过var(--font-color)可引入
 
//暗黑模式颜色设置,
body[mode="dark"] {
--font-color: #000;
}
 
 
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
--font-color: red
}
body[mode = 'dark'] {
--font-color: blue
}
.mask {
color: var(--font-color)
}

</style>
</head>
<body>
<div class="mask">
777
</div>
<script>
setTimeout(() => {
document.body.setAttribute('mode', 'dark')
}, 5000)
</script>
</body>

</html>
posted @ 2021-09-04 16:12  吃饭七分饱  阅读(379)  评论(0)    收藏  举报