核心思路是预加载多套link样式表并用disabled属性动态切换，配合css变量与data-theme实现轻量主题切换，同时优先读取localstorage、监听系统偏好并正确管理状态优先级。
用 link 标签的 disabled 属性动态切换主题样式表
核心思路是预加载多套 link[rel="stylesheet"]，通过 JS 控制其中某一个的 disabled 状态。浏览器原生支持这个属性，切换快、无 FOUC（闪白）、兼容性好（IE9+ 都行）。
常见错误是试图用 innerHTML 替换 <style></style> 内容，或反复 remove()/append() link 标签——这会导致重排、请求重复、CSS 变量未生效等问题。
- 所有主题样式表必须在 HTML 中提前声明，且只保留一个默认启用（不设
disabled），其余都带disabled - 每个
link建议加id或data-theme便于 JS 定位，例如：<link id="theme-dark" rel="stylesheet" href="dark.css" disabled> - 切换时只需设置目标
link.disabled = false，同时把其他主题link.disabled = true
用 document.documentElement.setAttribute() 配合 CSS 变量实现轻量主题切换
如果主题差异不大（比如仅颜色、背景、文字色变化），优先用 CSS 自定义属性 + JS 切换根元素 class 或 data 属性。比加载整张 CSS 更快，也利于 SSR 和渐进增强。
容易踩的坑是直接在 :root 里写死所有变量值——这样无法响应式切换；正确做法是按主题分组，用 class 或 data 属性做作用域：
html[data-theme="dark"] {
--bg: #1a1a1a;
--text: #e0e0e0;
}
html[data-theme="light"] {
--bg: #ffffff;
--text: #333333;
}
- 切换主题只需执行：
document.documentElement.setAttribute('data-theme', 'dark') - 务必在
标签上操作，不要用body或其他容器，否则变量继承会断层 - 初始主题应由服务端或
<script></script>在 DOM 加载前写入，避免页面先渲染再闪动
监听系统偏好并自动同步主题（prefers-color-scheme）
用户开了深色模式，网页却还是亮色，体验割裂。用 window.matchMedia 监听系统设置是最自然的兜底方案。
注意：不能只在页面加载时读一次 matchMedia，必须用 addEventListener('change') 持续响应系统切换（比如 macOS 用户手动切深浅色）。
- 典型写法：
const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)'); - 首次判断用
darkModeMedia.matches设置初始主题 - 后续变更触发时，更新
data-theme或启用对应link，和手动切换逻辑复用同一套函数 - 部分旧版 Safari 对
change事件支持不稳定，可加setTimeout防抖兜底
localStorage 记住用户上次选择的主题
用户点了“切深色”，刷新就变回默认，这是最伤体验的细节。必须把选择存到 localStorage，并在页面初始化时优先读取它。
关键点在于读取时机和覆盖逻辑：系统偏好只是建议，用户显式选择应永远优先于 prefers-color-scheme。
- 读取顺序建议：
localStorage.getItem('theme')→ 存在则用；不存在则 fallback 到matchMedia→ 还不存在才用硬编码默认 - 写入时机：每次用户点击按钮后立刻
localStorage.setItem('theme', 'dark') - 注意清除场景：比如用户选了“跟随系统”，此时应
removeItem('theme')，否则 localStorage 会一直覆盖系统信号
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
