最稳定无FOUC的方式是用disabled切换预置link标签：所有主题CSS提前写入HTML并初始禁用，切换时仅修改对应link的disabled布尔值，确保样式原子级切换且变量同步生效。

最稳定、无 FOUC 的方式是预置所有主题 <link> 标签并用 disabled 属性切换，而不是改 href 或动态增删节点。

为什么直接改 href 容易出问题

看似一行代码就能切主题：document.getElementById('theme-css').href = '/css/dark.css'，但实际常遇到：

• FOUC：旧样式退场和新样式就位不同步，页面短暂白屏或错乱
• 缓存复用：同域名下浏览器可能直接返回旧 CSS 缓存，Network 里根本没发新请求
• @import 和 CSS 变量失效：已加载的样式表不会重新解析 @import，:root 中的变量也不会刷新
• 变量污染：如果 light.css 里定义了 --bg: #fff，dark.css 里也定义了同名变量但没生效，页面仍用旧值

用 disabled 切换的前提和写法

必须提前在 HTML 中写好所有主题 <link>，每个带唯一 id 和 rel="stylesheet"：

<link id="theme-light" rel="stylesheet" href="/css/light.css">
<link id="theme-dark" rel="stylesheet" href="/css/dark.css" disabled>
<link id="theme-blue" rel="stylesheet" href="/css/blue.css" disabled>

切换时只操作布尔值，不碰 DOM 结构：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• document.getElementById('theme-dark').disabled = false
• document.getElementById('theme-light').disabled = true
• document.getElementById('theme-blue').disabled = true

注意：disabled 是布尔属性，赋值必须用 true/false，不能写成字符串 "true"；否则语义错误且行为不可控。

动态创建 <link> 的适用场景和关键点

当主题不可预知（如按 tenantId 加载）或数量极大时，才需要运行时创建：

• 拼 URL 时确保唯一性，比如 /css/tenant-${tenantId}.css
• 必须设 rel="stylesheet" 和 type="text/css"（IE11 兼容需要）
• 插入前先查重：!document.querySelector(`link[href="${url}"]`)，避免重复加载
• 监听 load 事件后再移除旧 <link>，不要等 error 回滚——失败时保持当前主题更安全
• 别用 document.styleSheets 查找旧 link，它不反映真实 DOM 状态，容易误删

CSS 变量和主题文件的配合要点

主题切换后变量没生效？大概率是 CSS 文件结构有问题：

• 所有变量必须平铺在 :root 下，不能套在 .dark :root 这类选择器里——documentElement 不匹配，变量压根不注册
• 每个主题 CSS 文件要完整声明该主题所需全部变量，不要靠“基础 + patch”方式拼凑
• 避免变量嵌套引用：--color-btn: var(--color-primary)，加载顺序一乱就 undefined
• 不同主题间变量名必须严格一致，只允许值不同；否则 JS 读 getComputedStyle 会 fallback 到初始值

真正难的不是切换动作本身，而是让所有主题 CSS 文件在结构、变量命名、加载时机上达成精确对齐——漏掉任一环，都会在某个用户、某次刷新、某种网络条件下突然失效。