CSS一键切换黑暗模式是很常见的功能,让用户在不同的环境下可以舒适地使用网站。实现这个功能也很简单,只需要使用CSS来控制页面元素的颜色和背景即可。下面是一个简单的例子:body { backgrou
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存在时会删除它,当不存在时会添加它。
通过这种方式,我们就可以轻松地让用户在不同的环境下使用网站了。当然,黑暗模式只是一个例子,你也可以实现其他类似的功能,比如更换主题色等等。
粉丝
0
关注
0
收藏
0