已更新的Chrome浏览器为何无法优先启用color-scheme: dark（light为回退）？

首先得明确color-scheme的核心逻辑：当你写color-scheme: dark light时，这只是告诉浏览器你的页面支持深色和浅色两种配色方案，浏览器会优先匹配用户的系统主题偏好，而不是按照你写的顺序来优先启用第一个。

比如如果你的系统当前设置是浅色模式，哪怕你写的是dark light，浏览器也会自动选择浅色；只有当系统偏好深色时，才会启用深色模式。这就是为什么你设置两个值时，浏览器总是默认浅色的原因。

如果你想实现「优先深色，浅色作为回退」（也就是默认显示深色，仅在用户明确偏好浅色时切换到浅色），可以结合prefers-color-scheme媒体查询来写：

/* 声明页面支持两种配色模式 */
:root {
  color-scheme: dark light;
  /* 默认应用深色样式 */
  background-color: #1a1a1a;
  color: #ffffff;
}

/* 当用户系统偏好浅色时，切换到浅色样式 */
@media (prefers-color-scheme: light) {
  :root {
    background-color: #ffffff;
    color: #1a1a1a;
  }
}

要是你想完全强制页面显示深色（不管用户的系统偏好），直接设置color-scheme: dark就行，但这种做法会忽略用户的系统设置，除非有特殊需求，否则不推荐这么做。

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