最轻量换肤方式是直接修改带id的link元素href属性；多主题时需用disabled属性开关并配合data-theme标识；localstorage持久化须在head中link后立即执行脚本以防fouc。
直接改 href 是最轻量的换肤方式
只要页面里只有一个主题 <link>，且它有明确的 id（比如 id="theme-css"），直接赋值 href 就能触发浏览器自动加载并应用新样式，无需删节点、也不用监听 load 事件。
常见错误是改了 href 但没生效，大概率是缓存或路径问题：
-
href改成相对路径（如"dark.css"）容易因当前 URL 变化而 404，建议用根相对路径（"/css/dark.css"）或绝对 URL - 本地开发时浏览器可能强缓存 CSS，加时间戳参数可绕过：
link.href = "/css/dark.css?v=" + Date.now() - 控制台 Network 面板里看到 CSS 请求状态是
(blocked)或 CORS 错误，说明跨域没配好，不是 JS 问题
多个主题共存时必须用 disabled 属性控制
如果你在 HTML 中预置了多个 <link rel="stylesheet">（比如浅色、深色、高对比度），就不能只靠改一个 href —— 那样其他样式表还在生效，规则会叠加冲突。
正确做法是给每个 <link> 加 data-theme 属性，并统一用 disabled 开关：
- 初始 HTML 里全部设
disabled="true"，只留当前主题那个不设 - 切换函数里遍历所有
link[data-theme]，把link.disabled设为link.dataset.theme !== targetId -
disabled是 DOM 属性，必须用 JS 设置（link.disabled = true），不能靠写 HTML 属性“骗过”浏览器
为什么别碰 document.styleSheets
有人想通过 document.styleSheets[n].disabled = true 控制样式表，这条路基本走不通：
- 动态插入的
<link>在多数浏览器中不会出现在styleSheets列表里（尤其跨域、CSP 或 preload 场景下） - 列表顺序不稳定，
n值不可靠；title属性常为空，没法精准定位目标样式表 - 即使能访问到，禁用它也只停用解析，不等于“切换主题”——你没法用它加载新 CSS
结论：只操作带 id 或 data-theme 的 <link> 元素本身，其他都是弯路。
localStorage 持久化 + 防 FOUC 的关键细节
用户选了深色模式，刷新后应该还是深色。这需要结合 localStorage，但有个极易忽略的点：内联脚本必须放在 里、所有 <link> 之后，否则首次渲染会闪白（FOUC）。
- HTML 中先声明所有主题
<link>，全部disabled="true" - 紧跟其后放一段内联
<script></script>，读取localStorage.getItem("theme")，然后立即设置对应link.disabled = false - 不要等
DOMContentLoaded再执行——那时页面已经按默认样式渲染过了 - 按钮切换时同步写入
localStorage.setItem("theme", "dark")
真正难的不是写几行 JS，而是让浏览器在第一帧就用对样式，而不是先画一遍再重绘。这个时机差半秒，用户就感知到闪动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
