link标签切换暗黑模式易失效，因无法触发color-scheme和伪元素自动适配；须配合html[data-theme]属性同步更新，并用css变量驱动样式，或改用@media+data-theme双控内联方案。
link标签引入暗黑模式样式为什么容易失效
直接用 <link rel="stylesheet"> 切换暗黑模式，最常遇到的问题是：切换后滚动条还是亮色、input 的原生下拉箭头没变、textarea 滚动条卡在浅色、甚至整个页面颜色毫无反应。根本原因不是 CSS 写错了，而是 <link> 加载的样式表无法触发浏览器对 color-scheme 和伪元素（如 ::-webkit-inner-spin-button）的自动适配——这些只响应根元素上的 data-theme 或 color-scheme 声明，不响应外部 CSS 里定义的 class 切换。
必须把 theme-light.css 和 theme-dark.css 写成变量驱动式
如果你坚持用 <link> 引入多套样式，两份 CSS 文件不能只是写死颜色值，否则维护爆炸、无法和系统偏好联动。正确做法是：两份文件都只定义 :root 下的 CSS 变量，且不带任何媒体查询或条件逻辑。
-
theme-light.css写：:root { --bg: #ffffff; --text: #333333; --border: #e0e0e0; } -
theme-dark.css写：:root { --bg: #1a1a1a; --text: #e6e6e6; --border: #333333; } - 所有实际样式（
body、button、input等）必须写在主样式表（比如main.css）里，且全部用var(--bg)这类引用，不能写死#1a1a1a - 否则
<link>切换后，变量没重算，页面颜色纹丝不动
动态切换 link.href 时必须同步更新 html[data-theme]
只改 <link rel="stylesheet" id="theme-link"> 的 href，而不操作 document.documentElement.dataset.theme，会导致第三方库（如 Tailwind 的 dark:）、伪元素、color-scheme 全部失联。正确流程是原子操作：
- 先设
document.documentElement.dataset.theme = "dark"（或"light"） - 再改
document.getElementById('theme-link').href = 'theme-dark.css' - 必须按此顺序：CSS 变量重计算依赖
data-theme属性存在，浏览器才会重新解析:root中的变量值 - 别用
setAttribute('data-theme', 'dark')——dataset.theme更可靠，兼容性更好
更推荐的替代方案：别用 link 动态加载
除非你有超大主题包（比如 5+ 品牌主题、每套 200KB+），否则用 <link> 动态切主题纯属增加复杂度。现代实践里，95% 的场景应直接内联所有主题变量到一个 CSS 文件中，靠 @media (prefers-color-scheme: dark) + html[data-theme="dark"] 双重控制。这样：
- 避免网络请求延迟导致 FOUC（闪屏）
- 无需管理多个 CSS 文件路径和加载状态
-
color-scheme: light dark可直写在<style></style>里，滚动条/表单控件自动适配 - localStorage 保存的只是
"dark"字符串，JS 初始化只需一行：document.documentElement.dataset.theme = localStorage.getItem('theme') ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
真正难的从来不是“怎么切”，而是“切完之后滚动条还亮着、输入框边框还是浅灰”——那说明你没把 data-theme 放在 上，或者压根没配 color-scheme。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
