rel="alternate stylesheet"仅预加载不启用，必须用JS同步修改disabled和rel为"stylesheet"才能生效；所有可切换主题的link必须带唯一title，切换函数需遍历所有link并按title精准控制启用状态。
rel="alternate stylesheet" 本身不支持“自由切换”——它只是让浏览器预加载备用样式表，但是否启用、如何启用，全靠 JS 控制 disabled 和 rel 属性。真正起作用的不是 alternate，而是你手动触发的激活逻辑。
为什么必须同时改 rel 和 disabled
只设 link.disabled = false 不够：浏览器仍按 rel="alternate stylesheet" 处理，不会渲染该样式表。必须同步把 link.rel 改成 "stylesheet"，才能让它真正生效。
-
rel="alternate stylesheet"表示“已加载但不启用”，仅用于预加载和语义标记 -
rel="stylesheet"才是浏览器实际应用样式的触发条件 - 切换时旧主题要设
disabled = true，新主题要设disabled = false且rel = "stylesheet"
HTML 中 title 属性必须全部统一
混用带/不带 title 的 <link> 会导致行为不可控。比如：
<link href="reset.css" rel="stylesheet"> <link href="default.css" rel="stylesheet" title="Default"> <link href="dark.css" rel="alternate stylesheet" title="Dark">
此时 reset.css 总是加载并生效；default.css 作为默认主题也生效；dark.css 虽然预加载，但无法干净地“替换”掉 default.css ——因为没有 title 的 link 不参与主题切换逻辑。
立即学习“前端免费学习笔记（深入）”；
- 所有可切换主题的
<link>必须带title，且值唯一（如"light"、"dark"） - 确保只有一个
rel="stylesheet"且有title的 link（即当前激活的主题） - 其余备选主题统一用
rel="alternate stylesheet"+title
JS 切换函数必须遍历全部 link 元素
不能只操作某个 id 或 class，因为浏览器不认这些，只认 rel、title、disabled 这三个原生属性。
典型写法：
function setActiveStyleSheet(title) {
const links = document.querySelectorAll('link[rel="stylesheet"], link[rel="alternate stylesheet"]');
links.forEach(link => {
if (link.title === title) {
link.disabled = false;
link.rel = "stylesheet";
} else if (link.title) {
link.disabled = true;
}
});
}
- 用
querySelectorAll同时抓取两类 link，避免漏掉已激活的主题 - 判断
link.title存在才处理，跳过无 title 的 reset.css 等基础样式 - 不要用
getElementsByTagName("link")，它会包含非 CSS 的 link（如 icon、canonical），增加误操作风险
预加载带来的资源浪费问题
rel="alternate stylesheet" 会让所有备用 CSS 文件在页面加载时就下载，哪怕用户永远不切换。对移动端或弱网环境很不友好。
- 如果主题数 ≥ 3，建议改用动态
fetch+insertRule或<style></style>注入（尤其适合变量少、仅颜色变化的场景） - 若坚持用
alternate，至少把非首屏主题的href设为空，等用户点选后再填入真实路径（需配合onload回调） - 注意：Safari 对
alternate stylesheet的支持较弱，部分版本会忽略disabled变更，务必实测
最易被忽略的是：每次切换后，document.styleSheets 的顺序和启用状态可能不一致，导致 CSS 优先级错乱。不要依赖 link 标签顺序来控制层叠，而应在 CSS 文件内部用明确的 specificity 或 scope 控制。
