仅使用HTML和CSS的亮暗模式按钮切换
在这里插入图片描述
建立仅html和css的亮暗模式切换的快速指南。文章末尾给出了完整代码
演示效果：
在这里插入图片描述
使用css，html我们将建立一个按钮，该按钮：
light-mode和dark-mode之间的变化- 默认为用户首选的配色方案
- 更改标签以反映用户的首选配色方案。
为什么没有JavaScript？
我的目标之一是使每个工具都可以不使用javascript，以一定程度上简化代码，同时也是个挑战。
我需要一种dark-mode 无需javascript进行切换的方法，同时仍然默认为visitor preferred-color-scheme。
这是我的解决方案，针对本教程进行了简化：
怎么运行的：
大多数dark-mode切换按钮的工作方式是更改标签上的属性，然后在CSS中定位该属性。像这样：
<body class="dark-mode">
<!-- Site Content -->
</b本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录