前端实现页面换肤功能
/**
项目背景切换设计;默认明亮模式，如果需要切换到暗黑模式只需要在设置<body mode="dark"></body>
*定义根dom body下的css变量
*/
// 明亮模式颜色设置
body {
--font-color: #fff;
}
页面中通过var(--font-color)可引入
//暗黑模式颜色设置,
body[mode="dark"] {
--font-color: #000;
}
--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>
