rel="alternate stylesheet" 不能直接切换主题，仅用于在firefox等浏览器的“页面样式”菜单中列出备用样式表，实际切换需javascript手动控制启用/禁用，并通过修改rel为"stylesheet"和设置disabled属性实现。
rel=alternate stylesheet 是什么，它真能切换主题吗
不能直接切换。浏览器原生不支持点击 rel="alternate stylesheet" 自动切换；它只是标记“备用样式表”，需配合 JavaScript 手动启用/禁用。很多教程误以为加个 rel="alternate" 就能点选切换，结果发现没反应——这是最常踩的坑。
它的作用其实是：让浏览器（如 Firefox）在「查看 → 页面样式」菜单里列出可选主题，供用户手动选择；现代 Chrome / Edge 已基本移除该菜单，所以实际依赖 JS 控制。
怎么写 HTML 才让备用样式表可被 JS 识别和切换
关键在三处：必须有 title 属性、rel="stylesheet" 初始状态要设为禁用、rel="alternate stylesheet" 的 link 必须保持加载但不生效。
-
<link rel="stylesheet" href="default.css" title="default">—— 主样式，带title，且不能加disabled -
<link rel="alternate stylesheet" href="dark.css" title="dark">—— 备用样式，必须带title，且初始不生效（靠 JS 启用） - 所有
<link>的title值必须唯一，JS 靠它匹配启用/禁用 - 不要给备用 link 加
disabled属性——它只对rel="stylesheet"有效，对rel="alternate stylesheet"无效
用 JavaScript 切换主题的核心逻辑
核心是遍历所有 <link>，把当前激活的 title 对应的设为启用（disabled = false），其余设为禁用（disabled = true）。注意：只有 rel="stylesheet" 的 link 才响应 disabled 属性，所以必须先把备用样式表临时改为 rel="stylesheet" 才能控制。
示例代码：
function setActiveStyleSheet(title) {
const links = document.querySelectorAll('link[rel="stylesheet"], link[rel="alternate stylesheet"]');
links.forEach(link => {
if (link.title && link.title === title) {
link.disabled = false;
link.rel = "stylesheet"; // 确保它能生效
} else if (link.title) {
link.disabled = true;
}
});
}
// 调用：setActiveStyleSheet("dark");
⚠️ 容易漏掉的点：link.rel = "stylesheet" 这一步不可省——否则即使 disabled = false，浏览器仍按 alternate 处理，不应用样式。
为什么 localStorage + 切换后刷新失效？怎么修复
因为页面重载时，JS 还没执行，浏览器按 HTML 原始状态渲染：只有第一个 rel="stylesheet" 生效，备用样式仍为 alternate 且未启用。用户看到的是默认主题，哪怕 localStorage 记着上次选的是 dark。
- 修复方法：在
里放一段内联<script></script>，读取localStorage并立即设置disabled和rel - 必须放在所有
<link>标签之后（但仍在前），否则找不到 DOM 元素 - 别用
DOMContentLoaded——太晚，样式已渲染完毕，会闪屏
这个时机问题，是主题切换体验差的根源，也是最容易被忽略的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
