想用html和css弄一个炫酷的网页去参赛,但是不知道哪里去找资源参考
不知道你这个问题是否已经解决, 如果还没有解决的话:现在我们已经交换了暗模式和亮模式,我们需要确保复选框的标签能够反映出这一点。
如果在屏幕为亮白色时标签上说暗模式处于打开状态,将会令人困惑。
也有一个快速解决方案。 首先,我们在<label>
中添加两组文本,每个用户首选项一组:
<input id="color-mode" type="checkbox" name="color-mode">
<label for="color-mode">
<span class="dark-mode-hide">Dark Mode</span>
<span class="light-mode-hide">Light Mode</span>
</label>
然后,根据模式隐藏标签之一。
这组媒体查询可以让我们双方的目标light-mode
,dark -mode
以及浏览器不支持prefers-color-scheme
:
.light-mode-hide {
display:none;
}
@media (prefers-color-scheme: dark) {
.dark-mode-hide {
display:none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode-hide {
display:initial;
}
}
就这些了,欢迎来评论区,让我知道你的想法!