使用CSS3的变量实现网页主题切换

由于 css变量 只能被其子元素所访问，因此可以将一个类添加到 body 元素上，这样整个网页都能够获取到此类身上的变量了，之后再通过 js 动态的切换 body 身上的类名，达到动态更换主题的效果，代码如下：

HTML

<div class="box">
    <div>主题切换div>
div>

CSS

/* 主题设定 一个类名就是一个主题 */
body.red {
    --background-color1: #ffded8;
    --background-color2: #ed4b00;
    --color: white;
}

body.blue {
    --background-color1: #cdd7ff;
    --background-color2: #2eb4f7;
    --color: #708;
}

/* 清除浏览器默认样式 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 1rem;
}

/* 用户样式 正常使用变量即可 */
.box {
    padding: 20px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(var(--background-color1), var(--background-color2));
    height: 100vh;
}

.box div {
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    background-color: var(--background-color2);
    margin: auto;
    user-select: none;
    cursor: pointer;
    color: var(--color);
    box-shadow: 2px 2px 5px 0px #555;
    transition: background-color 1s;
}

JS

document.querySelector('body').classList.add('red')

document.querySelector('.box div').addEventListener('click', function (){
    const body = document.querySelector('body')
    body.className = body.className == 'red' ? 'blue' : 'red'
})