浅色模式效果如图：
深色模式效果如图：
window.matchMedia ( https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia ) 方法可以用来查询指定的媒体查询字符串解析后的结果。结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配，深色模式匹配 (prefers-color-scheme: dark) ，浅色模式匹配 (prefers-color-scheme: light) 。
监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。
浅色模式效果如图：
深色模式效果如图：
许多人喜欢为网站选择深色模式，也许他们更喜欢这种UI，或者他们想让眼睛免受疲劳。这篇文章将向你展示如何实现自动css深色模式，该模式根据访问者的主题而变化。
在此站点上，我定义了变量以设置主题的颜色，我配置的标准变量如下：
变量使用方法：
这样，如果你想更改主题颜色，则只需修改定义的变量，所有使用该变量的内容都会更新。
现在我们需要定义一组新的变量，这些变量将在调用css深色模式时使用。对我来说，其他变量定义如下所示：
现在，我们定义了两组变量，剩下要做的就是将 prefers-color-scheme 媒体查询添加到我们的深色变量中。
带上深色变量并在 @media 下面添加查询：
如果有人使用深色操作系统主题并访问你的网站，你的网站将自动切换到深色模式
切换前
切换后
如果你想要测试效果，可以修改自己操作系统的主题模式
现在，如果你有一个网站，不仅应该支持响应式，而且在主题方面也具有响应能力。我敢肯定，你的深夜访客或那些只喜欢深色主题网站的访客一定会感谢你。
原文地址（英文）： https://kevq.uk/how-to-add-css-dark-mode-to-a-website/
一般我们的复选框长成下面这样，现在要求你切深色模式的时候，更改复选框选中的强调色为粉色。
审查元素，你发现 Checkbox 是原生 HTML 标签写的，这个时候你挠挠头，想了想 CSS 好像没有更改强调色的属性，没办法，只能自己来自定义了，但是重新自己写问题很大，从头开始构建它最终会比预期的工作多得多，即使用第三方框架也不是最理想的解决方案，浏览器万一更新新增效果就扯犊子了。
最好的解决方案还是利用 CSS 属性来解决。这就是我们的主角：
接下来给出实现的源码：
问题来了，这么好用的 CSS 属性，难道就只支持复选框吗？那肯定不成本着好东西多用，它支持四个元素： checkbox 、 radio 、 range 和 progress 。每个都可以在此处以浅色和深色配色方案预览 https://accent-color.glitch.me 。
通过 https://caniuse.com/?search=accent-color 查询 accent-color 的兼容性很一般，但是你要知道，即使是不支持的浏览器，你写了 CSS 语法是不会报错的，所以作为增强使用完全没问题。
