前言

在暗黑模式下，系统对所有窗口，视图，菜单和控件采用较暗的调色板。Youtube 支持对比效果，可以看出

浅色模式

深色模式

优势

可大幅减少耗电量（具体取决于设备的屏幕技术）
为弱视以及对强光敏感的用户提高可视性
让所有人都可以在光线较暗的环境中更轻松地使用设备

系统兼容情况

macOS 10.14 引入了 darkmode，（设置方式：系统偏好设置-通用-外观-深色）
ios13 2019 年 3 月发布的 ios13 版本加入了 darkmode，（设置方式：显示与亮度-深色）
Android 10 (API 级别 29) 及更高版本中提供深色主题背景地址（设置方式：显示与亮度-深色模式-开启）
window10 2018年10月10（设置方式：右键-个性化-颜色-深色）

h5支持

meta配置

在head中声明meta

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 的草案，在生产环境还需要针对不同浏览器做一些向下兼容处理。

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来控制的样式，没有使用媒体查询

图片适配

浏览器会选择最匹配的子元素，如果没有匹配的，就选择元素的src属性中的URL。然后，所选图像呈现在元素占据的空间中。

其他

更多的媒体查询适配！
根据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

H5如何适配黑暗模式

前言

优势