如何仅通过HTML基于prefers-color-scheme媒体查询条件加载明暗模式拆分的CSS文件？

你的思路完全正确！不过有个小拼写错误需要修正——prefers-color-schme应该写成prefers-color-scheme（多了一个字母e），修正后的写法就是无需JavaScript、纯HTML实现颜色模式CSS条件加载的标准方案，完全符合你的需求。

正确的代码示例 #

<link rel="stylesheet" href="/light.css" type="text/css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/dark.css" type="text/css" media="(prefers-color-scheme: dark)">

为什么这个方案可行？ #

浏览器内置的prefers-color-scheme媒体查询会自动检测用户系统的颜色模式偏好：

• 当用户系统设置为浅色模式时，浏览器只会加载匹配(prefers-color-scheme: light)的light.css
• 当系统切换为深色模式时，会自动加载dark.css，同时不会加载另一个未匹配的文件

浏览器会智能处理资源加载，不会冗余加载不符合当前条件的CSS，性能上完全没问题。

额外的兼容性兜底方案 #

如果需要兼容极少数不支持prefers-color-scheme的旧浏览器（比如IE11及更早版本），可以添加一个不带媒体查询的基础样式文件作为兜底：

<!-- 基础兜底样式，旧浏览器会加载这个 -->
<link rel="stylesheet" href="/default.css" type="text/css">
<!-- 浅色模式专属样式 -->
<link rel="stylesheet" href="/light.css" type="text/css" media="(prefers-color-scheme: light)">
<!-- 深色模式专属样式 -->
<link rel="stylesheet" href="/dark.css" type="text/css" media="(prefers-color-scheme: dark)">

注意要确保模式专属CSS的样式优先级高于基础样式（比如通过更具体的选择器，或者使用!important作为最后手段），这样才能正确覆盖基础样式。

测试方法 #

你可以通过两种方式快速验证效果：

• 修改操作系统的显示模式（Windows的「个性化设置」、Mac的「系统偏好设置-显示器」）
• 使用浏览器开发者工具模拟：比如Chrome DevTools的「渲染」面板中，找到「模拟CSS媒体特性 prefers-color-scheme」选项，切换浅色/深色模式

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