前言
在暗黑模式下，系统对所有窗口，视图，菜单和控件采用较暗的调色板。Youtube 支持对比效果，可以看出
优势
- 可大幅减少耗电量（具体取决于设备的屏幕技术）
- 为弱视以及对强光敏感的用户提高可视性
- 让所有人都可以在光线较暗的环境中更轻松地使用设备
系统兼容情况
- macOS 10.14 引入了 darkmode，（设置方式：系统偏好设置-通用-外观-深色）
- ios13 2019 年 3 月发布的 ios13 版本加入了 darkmode，（设置方式：显示与亮度-深色）
- Android 10 (API 级别 29) 及更高版本中提供深色主题背景 地址 （设置方式：显示与亮度-深色模式-开启）
- window10 2018年10月10（设置方式：右键-个性化-颜色-深色）
h5支持
meta配置
在head中声明meta
<meta name="color-scheme" content="light dark">
css适配
此声明并非为页面做自动适配，只影响浏览器默认样式
:root {
color-scheme: light dark;
}
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}
注意：prefers-color-scheme 在 W3C 规范上处于媒体查询 level5 的草案，在生产环境还需要针对不同浏览器做一些向下兼容处理。
js适配
Window.matchMedia 表示指定的媒体查询字符串解析后的结果
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function darkModeHander(){
if(mediaQuery.matches){
console.log('是深色模式');
} else {
console.log('是浅色模式');
}
}
mediaQuery.addListener(darkModeHander);
mediaQuery 得到 MediaQueryList
// MediaQueryList
{
matches: false,
media: "(prefers-color-scheme: dark)",
onchange: null,
}
注意：如果是 native 上的 webview 容器只需要支持 darkmode 的 runtime 就可以，就不用考虑兼容处理了。针对app有自己的暗黑，还存在跟随系统暗黑的情况，或者其他的逻辑，如果用媒体查询还是无法解决的，其实完全可以通过js做逻辑判断添加新的类来控制暗黑样式。之前做的暗黑的需求就是通过和webview交互获得当前暗黑标识，添加class来控制的样式，没有使用媒体查询
图片适配
浏览器会选择最匹配的子<source>元素，如果没有匹配的，就选择 <img>元素的src属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。
<picture>
<!-- 深色模式下的图片 -->
<source srcset="dark.png" media="(prefers-color-scheme: dark)"></source>
<!-- 默认模式下的图片 -->
<img src="light.png"/>
</picture>
其他
更多的媒体查询适配！
根据Specification [drafts.csswg.org]W3C 草案中的说明，通过媒体查询和 js matchMedia Api 不仅可以用来适配 darkmode。还可以通过下面的 key 来适配更多的场景：
- inverted-colors：反转色
- prefers-reduced-motion：减少动画
- prefers-reduced-transparency：透明度
- prefers-contrast：对比度
- forced-colors：指定颜色
参考文章
扫盲， H5适配暗黑主题（DarkMode）全部解法
Web前端H5项目适配暗黑模式
h5如何实现暗黑？
H5 项目如何适配暗黑模式
WebKit中已支持暗黑模式
iOS13 暗黑模式设计原则及建议
Dark Mode - Visual Design - macOS - Human Interface Guidelines - Apple Developer
深色主题背景 | Android Developers
