暗黑模式自动切换需用localStorage存偏好、matchMedia监听系统主题并同步更新。1. 初始化按localStorage>系统偏好顺序设data-theme；2. 监听系统变更实时更新；3. 手动切换时同步DOM与存储；4. CSS用data-theme变量控制样式，确保DOMContentLoaded前完成设置。
暗黑模式自动切换的关键在于：用 localStorage 记住用户偏好，结合 系统级媒体查询（prefers-color-scheme）做初始判断，并在页面加载和系统主题变化时同步更新样式与存储状态。
1. 初始化时读取存储并匹配系统偏好
页面首次加载需按以下优先级决定主题：
- 若
localStorage中有明确设置（如"dark"或"light"），直接采用该值； - 若未设置，则监听
window.matchMedia("(prefers-color-scheme: dark)")获取系统当前偏好； - 根据结果给
添加data-theme="dark"或data-theme="light"属性，并写入 localStorage。
2. 监听系统主题变更并实时同步
用户在操作系统中切换深色/浅色模式时，网页应响应变化：
- 使用
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ...)监听； - 回调中更新
的data-theme属性； - 同时将新值存入
localStorage，确保下次打开仍保持一致。
3. 提供手动切换按钮并更新存储
用户主动点击切换按钮时，需同时更新界面和持久化状态：
- 按钮点击后，计算下一个主题（如当前是
"dark"，则切为"light"）； - 修改
的data-theme属性； - 调用
localStorage.setItem("theme", nextTheme)持久保存； - 可选：触发一次自定义事件（如
themechange），供其他模块响应。
4. CSS 中通过 data-theme 控制样式
无需重复写两套完整样式，用属性选择器高效管理：
html[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }html[data-theme="light"] { --bg: #ffffff; --text: #333333; }- 组件中统一使用
background: var(--bg); color: var(--text); - 关键元素（如
）建议直接绑定background-color和color到 CSS 变量，避免继承异常。
不复杂但容易忽略：务必在 JS 执行前或 DOMContentLoaded 时完成 data-theme 设置，否则可能出现闪屏；CSS 变量定义建议放在 :root 下，并确保有默认值兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
