Dark Mode 开发与 Debug 指南

Dark Mode 的判断

media 中有一个属性 prefers-color-scheme ，用 matchMedia() 来检测 (prefers-color-scheme: dark) 是否存在就可以了。

Dark Mode Debug

截止2019年11月15日，目前经过测试可以直接 Debug DarkMode 的浏览器（以最新版为准）：

• Safari
• Chrome 金丝雀版

其中 Firefox 可以通过安装插件实现 Dark Mode Debug（兼容性不是很好）。

Safari

在控制台中点击第三个按钮一键启用。

另外文中提到的 color-scheme属性还在漫漫长征路，暂时可以不用报啥希望……

Chrome

Rendering Tab 滚到最下面，Emulate CSS media type。

在 Chromium 中这个 issue 的状态是 assigned，或许很快就会安排上，暂时可以用金丝雀凑合一下：issue 地址

Firefox

Firefox 没有官方入口，只能通过第三方开发的一个插件勉强实现（原理请见第一篇文章），但是似乎还有 Bug，比如我们的 DLS 就没有办法通过这个插件切换到 Dark Mode。（Developer Edition 也没有这类功能）

目前相关的 issue 并没有人跟进：https://bugzilla.mozilla.org/show_bug.cgi?id=1547818

参考链接

1. prefers-color-scheme
2. Dark Mode Support in WebKit