最稳方式是直接修改带唯一id的link标签href属性，使用根相对路径，检查元素存在，并监听load/error事件确保生效，结合prefers-color-scheme初始化且用户选择优先级最高。
直接改 <link> 的 href 最稳
浏览器原生支持，不依赖 CSSOM 或 JS 注入，无 FOUC、无跨域加载失败风险。关键不是“能不能切”，而是“怎么切才不出错”。
必须满足三点：
– 目标 <link rel="stylesheet"> 有唯一 id（比如 id="theme-css"）
– 新 CSS 路径是根相对路径（如 /css/theme-dark.css），避免 SPA 路由下解析错误
– 切换前检查元素存在：if (!document.getElementById('theme-css')) return
常见错误：多个 <link> 标签没加 id，JS 找错目标，把第三方库的样式表替换了，整个 UI 错位。
load 和 error 事件不能省
改完 href 后样式不会“立刻生效”。浏览器要下载、解析、应用，中间有延迟。此时读 getComputedStyle 或触发动画，大概率拿到旧值。
必须监听这两个事件：
– load：表示新 CSS 已加载并生效，可安全执行后续逻辑（如更新 localStorage、重绘 canvas）
– error：路径 404、CORS 拒绝、网络中断都会触发，需降级处理（比如 fallback 到默认主题）
– 别用 setTimeout 等固定时间，移动端弱网下不可靠
注意：load 只保证 CSS 文件加载完成，不保证其中引用的字体、图片等资源已就绪。
配合 prefers-color-scheme 初始化更自然
用户第一次访问时，不该硬塞一个默认主题。应该先查系统偏好，再决定初始 href 值。
实操步骤：
– 页面加载时立即执行：const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
– 根据结果设 themeLink.href，再绑定 change 监听器响应系统级切换
– 但要注意优先级：用户手动切换 > 系统偏好。即一旦用户点过切换按钮，就不再响应系统变化，除非用户主动重置
别在 DOMContentLoaded 之后才查 matchMedia——此时页面可能已按浅色主题渲染完毕，造成短暂闪屏。
预加载备用 CSS 能减少白屏感
单纯改 href 是“卸载旧 + 加载新”的原子过程，慢网下会有一段空白期。加预加载能显著缓解。
只对备用主题做 <link rel="preload" as="style" href="/css/theme-dark.css">
– 必须和实际切换时用的 href 完全一致
– 不要用 rel="prefetch"，它优先级太低，常被浏览器忽略
– 绝对不要用 rel="stylesheet" 预加载，否则两个主题 CSS 同时生效，规则冲突
真正容易被忽略的是缓存控制：生产环境务必加版本号或哈希（如 /css/theme-dark.css?v=2.3.1），否则用户切主题后可能加载到旧缓存文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
