需用JS在DOM就绪后读localStorage动态插入带唯一id的link标签，fallback至系统偏好和默认色，命名含语义与哈希，避免缓存与路径问题，并处理localStorage不可用异常。
怎么用JS读localStorage决定加载哪个CSS文件
直接在HTML里写<link>是静态的，没法响应用户偏好；必须用JS动态创建并插入<link>标签。关键不是“能不能”，而是“什么时候插”——得等localStorage读出来、且DOM就绪之后再操作，否则可能挂载失败或闪屏。
常见错误现象：localStorage.getItem('theme')返回null（用户第一次访问），或<link>插入太早导致样式没生效；还有人用document.write，这会清空整个页面，千万别碰。
- 用
document.addEventListener('DOMContentLoaded', ...)确保DOM可用 - 读取前先检查
localStorage是否存在，避免Safari无痕模式报SecurityError - 优先 fallback 到系统偏好（
window.matchMedia('(prefers-color-scheme: dark)')），再 fallback 到默认浅色 - 插入
<link>时设rel="stylesheet"和disabled="true"，等onload后再启用，避免FOUC（样式闪烁）
dark.css和light.css怎么命名才不容易冲突
别用theme.css这种模糊名——你没法同时存两个版本，也不方便CDN缓存分离。实际部署时，文件名要带语义+哈希（或版本号），否则换主题后旧CSS可能被强缓存住。
使用场景：用户切换主题后刷新页面，得立刻加载对应CSS；CI/CD自动发布新CSS时，不能让老用户还卡在旧文件上。
立即学习“前端免费学习笔记（深入）”；
- 推荐命名：
theme-dark.a1b2c3d4.css和theme-light.e5f6g7h8.css，哈希随内容变 - 路径统一放在
/assets/css/下，避免相对路径出错（比如从/user/edit页加载时路径偏移） - 不要把CSS内联进JS字符串里——维护难、无法利用浏览器CSS解析优化、gzip率低
- 如果用构建工具（Vite/Webpack），可通过
import.meta.env.BASE_URL或__PUBLIC_PATH__拼接绝对路径，防部署子路径失效
localStorage读写失败的三个典型原因
不是所有环境都能读localStorage，尤其移动端WebView、某些隐私浏览器、或开启了「阻止所有Cookie」的Chrome设置。这时候不处理就会白屏或样式错乱。
错误信息示例：Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
- Safari无痕模式、Firefox严格跟踪保护、Edge“阻止跨站点跟踪”开启时，
localStorage直接抛错，需用try/catch兜底 - HTTP页面里尝试读取HTTPS域名下存的值（协议不一致），结果为
null，但不报错——容易误判为用户没设偏好 - 部分安卓WebView对
localStorage大小限制极严（甚至2.5MB都超限），写入失败却静默，建议只存短字符串如'dark'或'light'，别塞JSON
为什么不能在React/Vue组件里直接挂载link
框架的SSR或Hydration过程会接管<head>，你在useEffect或mounted里操作document.head，很可能被服务端渲染的初始<link>覆盖，或者触发两次加载。
性能影响：重复挂载相同href的<link>，浏览器会发两次请求（即使内容一样），且可能阻塞渲染。
- React中，用
useEffect+cleanup函数移除旧<link>，再插入新链接 - Vue 3 Composition API里，
onMounted里做，但记得用nextTick确保DOM更新完成 - 更稳的做法：服务端根据请求头
Sec-CH-Prefers-Color-Scheme（如果支持）或UA预判主题，直出对应<link>，JS只负责后续切换 - 务必给每个动态
<link>加唯一id（如id="dynamic-theme-link"），方便后续替换，而不是每次都appendChild
最麻烦的点其实是缓存策略和降级顺序：localStorage不可用 → 系统偏好 → 浏览器默认背景色 → 强制设body class。这些链路一环断掉，视觉就可能错位，而且很难复现测试。
