css一键切换黑暗

CSS一键切换黑暗模式是很常见的功能，让用户在不同的环境下可以舒适地使用网站。实现这个功能也很简单，只需要使用CSS来控制页面元素的颜色和背景即可。下面是一个简单的例子：

body {
    background-color: white;
}

.button {
    background-color: #333;
    color: white;
    border-radius: 20px;
}

.dark-mode body {
    background-color: #333;
    color: white;
}

.dark-mode .button {
    background-color: white;
    color: #333;
} 

在这个例子中，我们定义了两个样式，一个是默认样式，一个是黑暗模式的样式。当用户点击切换模式按钮时，我们只需要使用JavaScript来切换`body`的class即可。

function toggleDarkMode() {
    var body = document.getElementsByTagName('body')[0];
    body.classList.toggle('dark-mode');
} 

这里使用了`classList.toggle`来添加或删除`body`的class，当class存在时会删除它，当不存在时会添加它。

通过这种方式，我们就可以轻松地让用户在不同的环境下使用网站了。当然，黑暗模式只是一个例子，你也可以实现其他类似的功能，比如更换主题色等等。