不推荐直接改的href切换主题——会闪屏、无法继承CSS变量、不响应prefers-color-scheme；应预加载disabled样式表并开关disabled属性，配合localStorage与系统偏好兜底，并优先采用data-theme+CSS变量方案。
直接改 的 href 是能切，但不推荐作为主力方案——它会触发样式表重加载、可能闪屏、无法利用 CSS 变量继承链、也不支持 prefers-color-scheme 自动响应。
下面说清楚几个关键实操点。
动态切换 href 会遇到什么问题
常见错误现象：document.getElementById('theme-css').href = 'dark.css' 执行后页面短暂白屏或颜色错乱；切换后第三方组件（如 Element Plus、Ant Design）样式未同步更新；用户手动切了暗色，但系统偏好是亮色，两者冲突。
- 浏览器不会等待新 CSS 加载完成再渲染，旧样式卸载和新样式解析存在空窗期
-
link切换不触发 CSS 变量的级联更新，如果 dark.css 里只写了:root { --bg: #111 }，但组件内用的是.card { background: var(--bg) }，这个变量在旧样式卸载前可能已被覆盖为 undefined - 无法与
@media (prefers-color-scheme: dark)共存——媒体查询依赖的是当前样式表内容，不是文件路径
比起删掉旧 link 再插入新 link，更好的做法是提前把所有主题样式都 disabled 加载好，只启用其中一个。
- HTML 中写两个带
id的link，都加disabled属性：<link id="light-theme" rel="stylesheet" href="light.css" disabled><link id="dark-theme" rel="stylesheet" href="dark.css" disabled>
- 切换时只操作
disabled属性：document.getElementById('light-theme').disabled = true，document.getElementById('dark-theme').disabled = false - 这样避免了网络请求延迟，所有样式已解析就绪，切换是原子性的
必须配合 localStorage 和系统偏好兜底
用户点了“切暗色”，刷新后又变回亮色，这是最常被忽略的一环。
- 切换时立刻写入：
localStorage.setItem('theme', 'dark') - 页面初始化时优先读取：
const saved = localStorage.getItem('theme')，没值再查matchMedia('(prefers-color-scheme: dark)').matches - 注意：不要在
里直接用 JS 设置disabled，要等 DOM ready，否则元素找不到
真正麻烦的是第三方库和图片资源
你切了 dark.css，但 node_modules/xxx/dist/xxx.css 还是按亮色写的，按钮边框、图标颜色全乱。
- Element Plus、Naive UI 等主流库已内置
dark类支持，但前提是你的dark.css里有对应类名（如.dark .el-button），且确保它加载顺序在组件样式之后 - 图片资源没法靠 CSS 切换，得用
picture+source media或 JS 根据data-theme动态换src - SVG 内联图标若用
fill="currentColor"，可继承文字色，比硬编码颜色更可靠
实际项目里， 切换只适合主题差异极大、CSS 文件体积小、且不依赖现代 CSS 特性（如变量、@layer）的场景。多数情况下，用 data-theme + CSS 变量才是主线， 仅作 fallback 或灰度发布用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
