结构
<div class="header">header</div>
<button onclick="handleChange()">change theme</button>
样式
<style>
:root {
/* :root伪类选择器表示文档根元素<html> */
--backgroundColor: #f0f0f0;
--color: #232323;
}
.header {
background-color: var(--backgroundColor);
color: var(--color);
padding: 30px;
margin: 30px;
}
</style>
事件
通过js来动态设置css变量
<script>
document.body.style.setProperty('--backgroundColor', '#f0f0f0');
document.body.style.setProperty('--color', '#232323');
function handleChange() {
const color = document.body.style.getPropertyValue('--color').trim();
if (color === '#232323') {
document.body.style.setProperty('--backgroundColor', '#000');
document.body.style.setProperty('--color', '#fff');
} else {
document.body.style.setProperty('--backgroundColor', '#f0f0f0');
document.body.style.setProperty('--color', '#232323');
}
}
</script>
效果
切换后
