应通过控制link元素的disabled属性或增删dom节点切换主题，而非修改rel/type或仅更新href；需预设所有主题样式表并用data-theme标识，结合localstorage与内联脚本避免fouc。
Link 标签的 rel="stylesheet" 如何被动态替换
不能靠修改 rel 或 type 来切换主题——浏览器只在 rel="stylesheet" 且 href 非空时才加载 CSS。真正有效的方式是控制多个 <link rel="stylesheet"> 元素的 disabled 属性，或增删 DOM 节点。
常见错误是试图用 document.querySelector('link[rel="stylesheet"]').href = 'dark.css'，这只会让旧样式表失效、新 URL 不生效（浏览器不重新触发加载）。必须操作 DOM 实例本身。
- 推荐做法：预先在 HTML 中声明所有主题样式表，全部设
disabled="true"，仅保留当前激活项无disabled - 备用做法：用
document.head.appendChild()动态插入新<link>，同时移除旧的（注意避免重复插入） - 不要用
innerHTML替换整个，会丢失已绑定事件或异步加载的脚本上下文
如何安全地启用/禁用多个 link 标签
关键是用 disabled 属性而非移除节点——它能保留样式表加载状态，切换更快，且避免 FOUC（Flash of Unstyled Content）风险。但要注意：disabled 是 DOM 属性，不是 HTML 属性，必须用 JS 设置。
示例代码片段：
function switchTheme(themeId) {
document.querySelectorAll('link[data-theme]').forEach(link => {
link.disabled = link.dataset.theme !== themeId;
});
}
使用前提：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有主题
<link>必须有data-theme属性（如data-theme="light"） - 初始页面需确保只有一个未 disabled；否则首次渲染可能无样式
-
disabled设为true后，对应 CSS 规则立即失效，但不会触发重新下载
为什么不能只靠 href 更新 + media 查询实现主题切换
media 属性（如 media="(prefers-color-scheme: dark)"）只能响应系统级偏好，无法支持用户主动选择深色/浅色/高对比度等多主题，也不能兼容不支持该媒体查询的老浏览器（如 IE11）。
更严重的问题是：即使你用 JS 修改 link.media，浏览器也不会因此重新加载或应用该样式表——media 只在初始解析时起作用。
- 想兼容手动切换 + 系统偏好，得组合方案：用 JS 检测
matchMedia('(prefers-color-scheme: dark)')初始化，再交由用户覆盖 - 不要把主题逻辑全压给 CSS，JS 层需记录当前主题 ID 并同步到
，方便组件级样式适配 - 若用 CSS 自定义属性（
--bg-color）做主题，仍需 JS 控制根元素 class，因为 :root 里变量无法跨 stylesheet 生效
localStorage 保存主题后如何避免白屏闪动
页面刚加载时，浏览器按 HTML 中顺序渲染样式，如果主题 JS 在 CSS 之后执行，用户会先看到默认样式（比如亮色），再跳变为目标主题——这就是白屏/闪动来源。
解决核心：让主题判定逻辑尽可能提前执行，在 内或第一个 <script></script> 中完成。
- 把主题判断逻辑写成内联脚本，放在所有
<link rel="stylesheet">之前 - 读取
localStorage.getItem('theme')，立即设置对应link.disabled状态 - 避免在
window.addEventListener('DOMContentLoaded', ...)里处理，太晚了 - 服务端可配合输出
，减少客户端 JS 判定延迟
最易被忽略的是：没预设 fallback 主题。当 localStorage 为空或值非法时，应降级到系统偏好或硬编码默认值，而不是留白等待 JS 执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
