用 document.querySelector('link[data-theme]') 定位主题 link 节点，直接修改其 href 属性实现动态换肤；配合 localStorage 优先级控制、路径映射对象、构建工具哈希化及 body 临时 class 等手段规避闪动与缓存问题。
怎么用 JavaScript 动态换 link[rel="stylesheet"] 的 href
核心就是找到当前主题样式表节点，改它的 href 属性——不是删了再新建，也不是靠 document.write 注入，那样容易触发重排或漏加载。
常见错误是直接操作 document.styleSheets，但它只读且不反映 DOM 节点状态；还有人用 innerHTML 拼 link 标签，结果在 IE 或 CSP 环境下静默失败。
- 先用
document.querySelector('link[data-theme]')定位唯一主题 link（推荐加data-theme属性，避免误匹配其他样式表） - 把新路径赋给
link.href，浏览器会自动触发异步加载并替换旧样式 - 换完可监听
link.onload和link.onerror做降级处理，比如回退到默认主题
主题 CSS 文件路径怎么组织才不容易 404 或缓存错乱
路径写死在 JS 里？不行。用户切主题时如果路径拼错、环境没部署对应文件，link 加载失败但页面无提示，UI 就崩了。
关键在「路径生成」和「缓存控制」两个环节：
立即学习“前端免费学习笔记（深入）”；
- 路径建议用对象映射：比如
{ light: '/css/theme-light.css', dark: '/css/theme-dark.css' }，JS 只负责查表，不拼字符串 - 后缀加时间戳或哈希（如
/css/theme-dark.css?v=2.3.1）能规避 CDN 缓存旧版本，但别用Date.now()，否则每次都是新请求，失去缓存意义 - 开发时用相对路径，上线前让构建工具（如 Webpack/Vite）自动转成带 hash 的绝对路径，避免手动维护出错
prefers-color-scheme 检测 + 用户手动覆盖，怎么共存不打架
不能只信 matchMedia('(prefers-color-scheme: dark)')，用户点了“强制深色”按钮，系统偏好就得让位。
典型冲突场景：用户系统设浅色，但自己选了深色主题；下次刷新页面又按系统偏好切回浅色——体验断层。
- 用 localStorage 存用户最后一次主动选择的值（如
localStorage.getItem('theme')），优先级高于prefers-color-scheme - 监听
prefers-color-scheme变化时，只在 localStorage 为空时才自动同步，避免覆盖人工选择 - 首次加载时，先读 localStorage，再 fallback 到媒体查询，最后 fallback 到硬编码默认值（比如 'light'）
换主题时样式闪动（FOUC）怎么压到感知不到
本质是旧样式卸载和新样式加载之间存在空窗期。浏览器不会等新 CSS 下载完再删旧的，所以有概率白屏或错版。
不是所有方案都有效：preload 只提前下载，不阻止渲染；CSS in JS 方案在这里反而更重，且 SSR 不友好。
- 保持旧
link节点不移除，只改href—— 浏览器内部会做平滑切换，多数现代浏览器已优化此行为 - 给
body加临时 class（如theme-loading），配合 CSS 设置transition: background-color .2s，掩盖微小抖动 - 服务端可读取请求头里的
Sec-CH-Prefers-Color-Scheme（Chrome/Edge 支持），首屏直出对应主题 HTML，彻底消灭客户端闪动
真正难的是多语言 + 多主题 + 多设备缩放同时生效时的 class 冲突，那个得靠 BEM 命名和 :where() 降权来兜底，不是换 href 能解决的。
