无JavaScript实现样式表未知prefers-color-scheme媒体查询的回退方案

纯CSS兼容方案 #

可以通过多条件组合的媒体查询实现需求，无需JavaScript，也不会出现样式表冗余加载的问题，实现代码如下：

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference), (not (prefers-color-scheme: dark) and not (prefers-color-scheme: light))">

逻辑说明 #

媒体查询使用逗号分隔多个条件时，只要任意一个条件匹配成功，整个媒体查询就会判定为真，对应样式表就会被加载：

• 对于支持prefers-color-scheme特性的现代浏览器：
  • 系统暗色模式下，仅第一个<link>的媒体查询匹配成功，只会加载dark.css
  • 系统浅色/无偏好模式下，仅第二个<link>的前两个条件匹配成功，只会加载light.css
• 对于不支持prefers-color-scheme特性的老旧浏览器：所有包含该特性的子查询默认返回假，此时第二个<link>的第三个条件not (prefers-color-scheme: dark) and not (prefers-color-scheme: light)会被判定为真（两个not运算的对象均为假，not假为真，且运算后整体为真），因此只会加载light.css作为兜底样式。

该方案完全符合要求：没有冗余加载、不依赖JavaScript、老旧浏览器自动兜底浅色样式、深色/浅色样式表不需要互相覆盖属性。

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