带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（11）https://developer.aliyun.com/article/1340885?groupCode=taobaotech
prefers-color-scheme
你可能知道了，ma cO S系统和iO S1 3 之后，苹果设备具备Da rkMo d e 效果（地址：h ttp s ://ww - w.w3cplus.com/blog/tags/700.html），就是用户可以根据自己的喜好来选择系统提供的色系：
使用 prefers-color-scheme 查询特性可以让你对用户是否打开了设备上Dark Mode来做出响应。换句话说，给Web页面或应用添加Dark Mode只需要几行代码即可。首先我们默认加载的主题是亮色系，我们可以在 :root 中声明亮色系所需要的颜色，比如：
:root { --text-color: #444; --background-color: #f4f4f4; 4 }
然后通过媒体查询prefers-color-scheme: dark为暗色系重置所需要的颜色：
@media screen and (prefers-color-scheme: dark) { :root { --text-color: rgba(255,255,255,.8); --background-color: #121212; } }
使用prefers-color-scheme 来定制不同外观主题时，还可以和theme-color 以及 color-scheme 结合起来使用。这将能控制系统应用的（比如浏览器）主题颜色：
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（13）https://developer.aliyun.com/article/1340883?groupCode=taobaotech
