如何仅在prefers-color-scheme:dark且html设color-scheme时启用柔和白文本？

我正在做一套类normalize.css的样式方案，希望在系统深色模式下，把body的默认文本颜色设为柔和的白色，最初写的代码是：

@media (prefers-color-scheme: dark) {
  body {
    color: #e1e1e1; /* 低对比度白色，避免刺眼 */
  }
}

但发现一个问题：如果页面的html元素没有设置如下代码：

html {
  color-scheme: light dark;
}

页面背景会保持白色，但上面的文本颜色规则依然会生效，导致浅白色的文本在白色背景上难以辨认。

需要说明的是：我无法控制页面开发者编写的代码，这套样式需要像JSBin/CodePen平台的normalize.css一样，适配任意开发者的代码。请问有没有办法仅当用户开启深色模式偏好，且html元素设置了color-scheme: light dark（或包含dark的color-scheme值）时，才启用body的color: #e1e1e1规则？

可以通过媒体查询结合CSS属性选择器来实现这个需求，代码如下：

@media (prefers-color-scheme: dark) {
  html:where([color-scheme*="dark"]) body {
    color: #e1e1e1; /* 低对比度白色 */
  }
}

原理说明 #

1. @media (prefers-color-scheme: dark)：捕获用户系统的深色模式偏好，只有当用户开启深色模式时，这个媒体查询内的规则才会进入候选状态。
2. html:where([color-scheme*="dark"])：用属性选择器筛选出color-scheme属性值中包含"dark"的html元素——不管开发者设置的是color-scheme: dark、color-scheme: light dark还是color-scheme: dark light，这个选择器都能匹配到。
3. 只有当上述两个条件同时满足时，才会给body设置柔和白色的文本颜色。如果开发者没有给html设置包含dark的color-scheme，这条规则就不会生效，自然也就避免了白字白背景的问题。

内容的提问来源于stack exchange，提问作者joe