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

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

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

Chrome

15766531298587.jpg
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

如果您觉得文章不错,可以通过赞助支持我

标签: 知识

添加新评论