rel="stylesheet alternate"不能自动切换主题，仅支持用户手动选择；应使用media="(prefers-color-scheme: dark)"配合rel="stylesheet"实现系统级自动切换，并通过disabled属性控制手动切换，同时处理no-preference和localstorage同步。
link标签的rel="stylesheet alternate"不能自动切换主题
浏览器原生不支持用 <link rel="stylesheet alternate"> 实现暗色/亮色自动切换。这个 rel 类型只用于声明“可选样式表”，需用户手动在浏览器菜单里选择（如 Firefox 的“查看 → 页面样式”），完全无法响应系统偏好或 JS 控制。强行写多个 alternate 样式表，只会让页面加载冗余 CSS，且毫无自动行为。
真正可行的方案是 media="(prefers-color-scheme: dark)"
现代浏览器通过 prefers-color-scheme 媒体查询识别系统主题，配合 <link> 的 media 属性，能实现零 JS 自动加载：
<link rel="stylesheet" href="light.css" media="not all"><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)">
关键点：
-
media="not all"是 trick：让第一个<link>默认不生效，避免竞态 - 必须显式写出
(prefers-color-scheme: light)和(prefers-color-scheme: no-preference)，后者覆盖 Win/Linux 未设置主题或 macOS 旧版本场景 - 所有
<link>都得是rel="stylesheet"，不能用alternate - 浏览器会根据系统变化实时切换匹配的
<link>，无需监听事件或重载
需要手动切换时，不要操作 link.href，改用 disabled
如果加了“深色/浅色切换按钮”，直接改 <link>.href 会导致 FOUC（闪白）且破坏媒体查询逻辑。正确做法是控制 disabled 属性：
const lightLink = document.querySelector('link[href="light.css"]');
const darkLink = document.querySelector('link[href="dark.css"]');
function setTheme(theme) {
if (theme === 'dark') {
lightLink.disabled = true;
darkLink.disabled = false;
} else {
lightLink.disabled = false;
darkLink.disabled = true;
}
}
注意：
- 两个
<link>必须同时存在且都启用（disabled=false）初始状态，否则媒体查询失效 - 切换后要存到
localStorage，并在页面加载时读取，覆盖系统偏好 —— 否则用户点了切换又刷新，回到系统默认 - 不要用
document.documentElement.classList模拟主题，那只是覆盖层，无法替代真实 CSS 加载，尤其影响打印样式和 SSR 渲染
兼容性与 fallback 要点
prefers-color-scheme 在 Safari 12.1+、Chrome 76+、Firefox 67+ 支持。老浏览器会忽略 media 属性，直接加载所有 <link> —— 所以必须确保 light.css 是最后加载的兜底样式表，且其中不包含 @media (prefers-color-scheme: dark) 冗余规则，否则造成样式冲突。
更稳妥的写法是把亮色样式写在主 CSS 里，暗色样式用 @media 包裹，但这就放弃了 <link> 懒加载优势。用 <link media> 方案时，最易被忽略的是 no-preference 场景处理和 localStorage 同步时机 —— 用户切主题后立即刷新，若 JS 还没执行完，页面会闪回系统主题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
