`。然后，设置`

`的样式以填充屏幕。现在我们可以使用复选框输入来设置`

`的样式： ```html Dark Mode

``` 这行得通！但是，我们仍然需要修复一些问题： - 我们需要将其默认设置为用户首选的配色方案。 - 我们应该使用css变量，因为它会使生活更轻松。 - 我们需要更改标签以反映用户的偏好。 ## 首先让我们添加CSS variables。 `CSS variables`使我们可以定义根据复选框而变化的颜色。我们将仅使用两种颜色，一种用于背景，另一种用于文本： ```css :root { --bg:#F4F0EB; --text:#141414; } #dark-mode:checked ~ .color-scheme-wrapper { --bg:#333; --text:#fff; } .color-scheme-wrapper { background:var(--bg); color:var(--text); } ``` 现在，当我们选中复选框时，变量将更改，并且这些更改将反映在或`CSS`的其余部分中。默认为访客的首选配色方案。现在让我们使其默认为用户的首选项。为了定位用户的偏好，我们可以使用`@media`查询。根据“ `prefers-color-scheme`”媒体查询的结果，我们将交换我们的亮模式和暗模式主题。因此，如果用户的设备启用了暗模式，则它将从暗开始： ```css :root { --bg:white; --text:black; } @media (prefers-color-scheme: dark) { :root { --bg:black; --text:white; } } #color-mode:checked ~ .color-scheme-wrapper { --bg:black; --text:white; } @media (prefers-color-scheme: dark) { #color-mode:checked ~ .color-scheme-wrapper { --bg:white; --text:black; } } .color-scheme-wrapper { min-height:100vh; background:var(--bg); color:var(--text); } ``` ## 根据用户偏好更改标签现在我们已经交换了暗模式和亮模式，我们需要确保复选框的标签能够反映出这一点。如果在屏幕为亮白色时标签上说暗模式处于打开状态，将会令人困惑。也有一个快速解决方案。首先，我们在``中添加两组文本，每个用户首选项一组： ```html Dark Mode Light Mode ``` 然后，根据模式隐藏标签之一。这组媒体查询可以让我们双方的目标`light-mode`，`dark -mode`以及浏览器不支持`prefers-color-scheme`： ```css .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; } } ``` 就这些了，欢迎来评论区，让我知道你的想法！ ## 1.CSDN积分下载 [https://download.csdn.net/download/qq_44273429/15817885](https://download.csdn.net/download/qq_44273429/15817885) ## 2.关注公众号免费下载关注作者微信公众号`啦啦啦好想biu点什么`回复`亮暗模式切换`免费获取，保存识别，也可在公众号上向我反馈遇到的问题，看到我会及时回复。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210123111950829.jpg#pic_center) 后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等 ## 相关内容 - [勇敢的兔子疯狂奔跑小游戏](https://mp.weixin.qq.com/s/h-F1Yx3LAMVKsvDpTTKjbg) - [基于HTML/CSS/JS的酷炫登陆注册表单](https://blog.csdn.net/qq_44273429/article/details/114490266) - [用HTML实现简单的下雪特效](http://mp.weixin.qq.com/s?__biz=Mzg5OTU2NTQ4MQ==&mid=2247484065&idx=1&sn=17a958a2a8df8458bf316fac55f865f3&chksm=c0501067f7279971add268cff499833f173c5d7368040c8c902da698eb72bdba23d10aca385a#rd) - [基于HTML/CSS/JS的动态元素周期表](https://blog.csdn.net/qq_44273429/article/details/114296024) - [基于HTML/CSS/JS的爱吹风的狮子小游戏](https://blog.csdn.net/qq_44273429/article/details/113792583) - [100个最常问的JavaScript面试问答](https://blog.csdn.net/qq_44273429/article/details/114240168) - [java五子棋小游戏含免费源码](https://mp.weixin.qq.com/s?__biz=Mzg5OTU2NTQ4MQ==&mid=2247483719&idx=1&sn=8c86ff28a782c838a184a4050c695d26&chksm=c0501381f7279a97df8f4467203e8de05ef7fd34f1d9be51a11c591c8e37e244cb010c55afda&token=925595149&lang=zh_CN#rd) - [一个炫光效果的酷炫登录表单](https://blog.csdn.net/qq_44273429/article/details/113797520) 感谢您阅读至最后❤️这是您的勋章 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210309222038491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MjczNDI5,size_16,color_FFFFFF,t_70) 最后，不要忘了❤️或📑支持一下哦