一工具让你的网站支持iOS13 Darkmode 模式

最近iOS13 发布了darkmode模式。虽然本人觉得次此功能呼声大于实际，但作为一个以用户体验为己任的前端，当然不能坐视不管，我们总该做点什么。

在进行了一番调研了解后，我们有几种支持darkmode模式的方法。

首先了解到一个叫 Darkmode.js 的工具，该工具通过配置一些通用的颜色，能让网站实现一键切换darkmode模式，简单方便。但缺点就是没办法实现比较细微的界面定制，只能在一些颜色上做处理。

如果你的设计师在设计稿上另外做了一版暗黑模式的，并且细节上除了颜色还有一些图片的修改，这时候可以用到css的媒体查询，对正常模式下的一些样式做覆盖。举个例子

.body {
    color: #000;
    background: url('normal.png');
}

在媒体查询中，我们覆盖需要修改的属性

/* b.css */
.body {
    color: #000;
    background: url('normal.png');
}

@media (prefers-color-scheme: dark) {
    .body {
        color: #fff;
        background: url('dark.png');
    }
}

在支持暗黑模式媒体查询的浏览器中，会自动渲染出media中的样式，实现样式覆盖。

该方法需要我们每次写一个样式都要在媒体查询中输入同样的选择器，如果选择器嵌套比较深或者当样式表比较长的时候，需要来回切换位置或文件，比较麻烦。基于这点，我开发了一个小工具，支持在正常样式的旁边，以注释的方式写上暗黑模式的样式，后续工具会自动编译成media的格式，无需用户手动编写。

举个例子，我们的代码可以这样写：

.body {
    color: #000;
    background: url('normal.png');
    /* dm[color: #fff;background:url('dark.png');] */
}

该文件最后会被编译成b.css中的格式。如果每次都需要输入/* dm[] */会比较繁琐，你可以在IDE中创建一个snippet. 方便输入。

更多详细的用法，请移步至 css-plugin-darkmode

fwon / blog

一工具让你的网站支持iOS13 Darkmode 模式 #41