带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（12）https://developer.aliyun.com/article/1340884?groupCode=taobaotech
请注意， 元素的背景颜色是如何根据是否启用了深色模式而改变的，它遵循了开发者在页面上提供的内联样式表的规则。它要么是gainsboro，要么是darkslategray。
上图是亮色模式（light）下，由开发者和用户代理指定的样式。根据用户代理的样式表，文本是黑色的，背景是白 色的。元素的背景颜色是gainsboro，由开发者在内联的式表中指定的颜色。
上图是暗色模式（dark）下，由开发者和用户代理指定的样式。根据用户代理的样式表，文本是白色的，背景是黑色的。元素的背景色是darkslategray，由开发者在内联样式表中指定的颜色。
按钮元素的外观是由用户代理样式表控制的。它的颜色被设置为ButtonText系统颜色，其背景颜色和边框颜色被设置为ButtonFace系统颜色。
现在注意元素的边框颜色是如何变化的。border-top-color和border-bottom-color的计算值从rgba (0,0,0,.847)（偏黑）切换到rgba(255, 255, 255, .847)（偏白），因为用户代理根据颜色方案动态地更新ButtonFace。同样适用于元素的color属性，它被设置为相应的系统颜色ButtonText。
看上去不错，但这也引出另一个新的概念，系统颜色（地址：https://drafts.csswg.org/css-color/#css-sys- tem-colors）。
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（14）https://developer.aliyun.com/article/1340882?groupCode=taobaotech
