发布于 2023/03/28
不可避免的，我们在很多时候需要在黑暗的环境下访问网站，而在黑暗的环境下，如果网站依然有大部分亮色区域，会在瞬间使眼睛受到刺激，极大的降低了用户体验。
同时，深色模式能减少OLED屏幕的功耗，延长设备的使用时间这也是很多人在白天也依然打开深色模式的原因。
如今，很多操作系统已经支持了深色模式，macos也提供了很好的深色模式支持。Chrome、FireFox等主流浏览器也已经支持通过 prefers-color-scheme单独定义深色模式下的样式，这也降低了我们制作深色模式的难度。
前面提到，我们可以通过 prefers-color-scheme来单独定义深色模式的样式，而 prefers-color-scheme是跟随系统的，显然，这种方式可以较好符合用户的个人喜好。
prefers-color-scheme的兼容问题的确，prefers-color-scheme对于低版本的浏览器适配并不友好，但是考虑到本站用户群体，这种问题几乎不会发生(其实是我懒)，所以就没有做过多处理。
显然，这种方式繁琐且复杂。
本站的配色信息都是以CSS Variable的形式存放在一个单独的css(global.css)中的，并在其他的css文件中可以直接通过 var(xxxx)引用，所以，我们可以为深色模式和亮色模式设计两种配色，并通过第一种方法实现，就可以实现自动的深色模式切换。
本站就是用的这种方法，在你的系统设置中切换配色即可体验。
https://blog.redish101.top/article/darkmode
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 进行许可。
商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。
body {
color: #000;
}
@media (prefers-color-scheme: dark) {
body {
color: #fff;
}
}:root {
--bg: #f2f5f8;
--card-bg: #fff;
--text: #000;
--link: #007bff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0d1117;
--card-bg: #161b22;
--text: #c9d1d9;
--link: #58a6ff;
}
}