① h5通过css进行深色模式切换
prefers-color-scheme ( https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme ) 是一种用于检测用户是否有将系统的主题色设和祥置为亮色或者暗色的 CSS 媒体特性。利用源棚埋其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。light 适配雹蚂浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。
浅色模式效果如图：
深色模式效果如图：
window.matchMedia ( https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia ) 方法可以用来查询指定的媒体查询字符串解析后的结果。结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配，深色模式匹配 (prefers-color-scheme: dark) ，浅色模式匹配 (prefers-color-scheme: light) 。
监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。
浅色模式效果如图：
深色模式效果如图：
② 微软Word Web黑暗模式上线，这个模式都有哪些不同
这种黑暗的模式上线之后，你会发现整个的系统和操纵得非常的厉害。
首先，用户可以切换到暗模式，而不会影响文档的白色背景。只需单击一下，即可在亮模式和暗模式之间切换。如果您对黑色色带和白色工作区感到满意，并且不想看到黑色工作区，Microsoft Word Web会记住用户背景切换的状态。Word web暗模式与Word for Mac和Windows一样好。启用此功能时，将使用菜单控件和文档背景启用暗图。
重要的是要知道，Microsoft以尊重用户默认系统主题的方式实现此功能。此外，设置应具有选择暗模式和亮模式的选项。当用户长时间在电脑屏幕上处理Word文档时，Word中的暗模式可以减轻眼睛疲劳。要使用Word Web暗模式，请转到“查看”>“暗模式”。如果您不喜欢文档的暗状态，可以单击“更改背景”按钮使用白色文档背景。