CSS应用深色模式使用媒体查询prefers-color-scheme，支持dark、light、no-preference三种模式。@media(prefers-color-scheme:dark){body{背景：#121212;}文章{颜色：rgba(255,255,255,.86);}}如果每个选择器都要写@media，还是有点麻烦。结合CSS自定义变量，匹配目标媒体时自动修改变量值。:root{--card-bg-color:#ffffff;--text-color:#606060;}@media(prefers-color-scheme:dark){:root{--card-bg-color:#1e1e1e;--文本颜色：#c0c??0c0；}}.card{background-color:var(--card-bg-color);}.some-else-block{color:var(--text-color);}在小程序中，使用page标签代替：根。JS判断深色模式是否使用matchMedia来判断是否匹配介质。返回一个MediaQueryList对象，该对象具有属性匹配和媒体以及方法addListener和removeListener。判断是否支持主题色：if(window.matchMedia('(prefers-color-scheme)').media==='notall'){console.log('浏览器不支持深色模式');}判断是否为深色模式：if(window.matchMedia('(prefers-color-scheme:dark)').matches){//...}addListener接收一个MediaQueryList对象作为参数。添加一个暗模式监听器以响应系统进入或退出暗模式：},light:(mediaQueryList)=>{if(mediaQueryList.matches){alert('你已经切换到亮模式！')}}}window.matchMedia('(prefers-color-scheme:dark)').addListener(listeners.dark)window.matchMedia('(prefers-color-scheme:light)').addListener(listeners.light)微信小程序中没有window对象，如何获取和监听系统主题，参考参见DarkMode适配指南|微信开放文档设计规范参考设计规范：MaterialDesign的深色主题设计规范iOS的深色模式设计规范参考网站如何支持深色模式-代码之路-SegmentFault思否
