最近iOS13发布了darkmode。虽然感觉这个功能比实际更受欢迎，但是作为一个以用户体验为己任的前端，我们当然不能坐视不管，还是应该做点什么。在做了一些研究之后，我们有几种支持暗模式的方法。首先，我了解了一个叫做Darkmode.js的工具。通过配置一些常用的颜色，该工具可以让网站一键切换到深色模式，简单方便。但缺点是没办法实现更细微的界面定制，只能对部分颜色进行处理。如果你的设计师在设计稿上做了另外一个版本的深色模式，除了颜色之外，还有一些细节上的图片变化，那么你可以在普通模式下使用CSS媒体查询来覆盖一些样式。例如.body{颜色：#000;background:url('normal.png');}在媒体查询中，我们覆盖需要修改的属性/*b.css*/.body{color:#000;背景:url('normal.png');}@media(prefers-color-scheme:dark){.body{color:#fff;背景：url('dark.png');}}媒体查询支持深色模式在浏览器中，媒体中的样式会自动渲染，实现样式覆盖。这种方法要求我们每次写样式的时候在媒体查询中输入同一个选择器。如果选择器嵌套很深或样式表很长，来回切换位置或文件很麻烦。基于此，我开发了一个小工具，支持在普通样式旁边以注释的形式编写深色模式的样式，后续工具会自动将其编译成媒体格式，无需用户手动编写。比如我们的代码可以这样写：.body{color:#000;背景：url('normal.png');/*dm[color:#fff;background:url('dark.png');]*/}这个文件最后会编译成b.css中的格式。如果每次都需要输入/*dm[]*/会比较麻烦，可以在IDE中创建一个snippet方便输入。更详细的用法请移步css-plugin-darkmode
