寻求纯CSS方案：浏览器不支持prefers-color-scheme时导入回退样式表

可以通过嵌套媒体查询的方式实现纯CSS兼容方案，完全满足你提出的三个限制条件，代码如下：

/* 针对不支持 prefers-color-scheme 的浏览器，加载浅色样式表 */
@media not all and (prefers-color-scheme) {
  @import url("light.css");
}

/* 支持该媒体查询的浏览器，根据系统偏好加载对应样式 */
@media (prefers-color-scheme: light) {
  @import url("light.css");
}

@media (prefers-color-scheme: dark) {
  @import url("dark.css");
}

方案原理 #

• 不支持媒体查询的浏览器：@media not all and (prefers-color-scheme) 会被判定为匹配，因此仅加载 light.css，不会触发其他媒体块的导入；
• 支持媒体查询的浏览器：上述第一个媒体块不会匹配，转而根据系统的颜色偏好，匹配对应的 light 或 dark 媒体查询，仅加载对应主题的样式表；
• 避免样式冲突：所有场景下只会加载单一主题的样式表，从根源上解决了双样式表同时加载导致的冲突问题；
• 无JavaScript依赖：全程纯CSS实现，完全适配JS禁用的环境。

注意：CSS 规定 @import 必须放在样式文件的最顶部（仅可在 @charset 之后），所以上述代码务必放在所有其他CSS规则之前。

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