最轻量兼容的主题切换方式是直接修改link元素的href属性，需确保id唯一、路径正确，并监听load事件；避免删插link以防闪屏，注意构建hash和路径适配，用临时class防抖动，第三方库需单独调用其主题api。
如何用 <link rel="stylesheet"> 动态换主题色
直接换 <link> 的 href 是最轻量、兼容性最好的方式，不需要 CSS-in-JS 或 CSS 变量兜底，老浏览器也照常工作。
核心就一句：document.getElementById('theme-css').href = 'dark.css';，但实际用起来有三个关键点必须处理好：
- 确保
<link>有稳定且唯一的id（不能靠 class 或顺序定位） -
href值必须是完整路径或相对于当前 HTML 的正确相对路径，否则 404 静默失败 - 切换后样式不会“立即生效”——浏览器要重新下载、解析、应用，得监听
load事件再做后续操作（比如移除 loading 状态）
为什么不能直接改 innerHTML 或删了重插 <link>
手动删掉旧 <link> 再新建插入，看似干净，实则容易触发两次样式重排，尤其在 Safari 和旧版 Edge 中可能闪屏或样式残留；而直接改 href 是原子操作，浏览器内部会自动 abort 旧请求、加载新资源，行为更可控。
常见错误现象：Uncaught TypeError: Cannot set property 'href' of null——说明没拿到 DOM 元素，要么 ID 拼错，要么脚本执行太早（DOM 还没加载完）。
- 务必把 JS 放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
