推荐使用预置多个<link>标签并控制disabled属性切换主题，因其是浏览器原生支持的原子级样式开关，可避免FOUC、缓存错乱及CSS变量失效；直接改href易导致白屏、样式不生效或崩溃。
直接改 <link> 的 href 是最常用但最容易出问题的方式；真正稳定、无 FOUC、变量同步生效的方案，是预置所有主题 <link> 并用 disabled 属性控制激活状态。
为什么不能只靠修改 href 切换主题
常见错误是写 document.getElementById('theme-link').href = 'dark.css'。这看似简单，但浏览器不会重新触发加载逻辑——尤其当新旧 URL 同域名时，可能复用缓存、跳过变量重计算，甚至忽略 @import 或字体声明。更糟的是，旧样式卸载与新样式加载之间存在空窗，导致 FOUC（白屏或布局抖动）。
关键点：
-
href修改不等于“重加载”，只是更新属性值，浏览器无义务响应 - CSS 变量一旦被后代元素继承并参与
calc()或color-mix()，仅靠覆盖:root无法还原渲染状态 - 没有
onload保障，无法知道新样式何时真正就位
必须用 disabled 属性切换，且要手动设置
disabled 是 DOM 属性，不是 HTML 属性。它能立即让对应样式表退出渲染流程，不触发重排，变量值也实时失效/生效，且保留已加载资源，切换极快。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- HTML 中一次性写全所有主题
<link>，全部带data-theme和disabled="true"，例如：<link rel="stylesheet" href="theme-light.css" data-theme="light" disabled="true"><br><link rel="stylesheet" href="theme-dark.css" data-theme="dark" disabled="true">
- JS 切换时用
.disabled = false激活目标，其余设为true：document.querySelector('link[data-theme="dark"]').disabled = false; - 初始页面必须确保只有一个未
disabled，否则首次渲染无样式
CSS 变量必须平铺在顶层 :root，不能嵌套
任何试图在 .dark-mode :root 或 body.dark :root 里重定义变量的做法都无效。浏览器只认文档根节点上的 :root，其他选择器根本匹配不到 document.documentElement。
主题 CSS 文件结构必须严格一致：
- 所有变量都写在顶层
:root { --bg-base: #fff; --text-primary: #000; } - 不同主题文件之间仅值不同，命名、顺序、层级完全相同
- 避免
var(--other-var)间接引用，防止加载顺序错乱导致 fallback - 不要加
@media (prefers-color-scheme)，JS 要完全掌控时机
localStorage 存的是字符串，不是对象
保存用户偏好只需存一个标识符，比如 "dark" 或 "light"，别存整个 CSS 内容或 JSON 对象。
页面加载时读取后，立刻执行切换逻辑：
- 用
localStorage.getItem('theme')获取值 - 查到对应
link[data-theme="..."]，设.disabled = false - 没读到则 fallback 到默认主题（如 light），并写入 localStorage
- 注意：不要在 DOMContentLoaded 前读取，否则
querySelector找不到节点
最易被忽略的一点：所有主题 <link> 必须在 HTML 中静态存在，不能靠 JS 动态创建再插入——那样会触发两次加载、FOUC 风险高，且 disabled 行为不可靠。预置 + 属性控制，才是浏览器原生支持的确定性路径。
