一键夜间模式核心是用CSS变量定义两套主题色，通过JS切换data-theme属性值并读取localStorage持久化，优先用户选择、其次系统偏好，配合合理transition避免闪烁，确保所有元素都使用var()取值。
如何用 CSS 变量 + JavaScript 实现一键夜间模式
核心是用 :root 定义两套颜色变量，再通过切换 data-theme="dark" 类名触发样式重绘。不用重载页面，也不依赖第三方库。
关键不是“加个 class”，而是让所有可变色元素（文字、背景、边框、按钮等）都从 var(--text-color) 这类变量取值——否则切了主题也没用。
- 把全局颜色抽成 CSS 变量，写在
:root里，比如--bg-primary: #fff;和--bg-primary: #1e1e1e; - 深色版变量写在
[data-theme="dark"] :root或单独的@media (prefers-color-scheme: dark)块里（后者仅响应系统偏好） - JS 切换时，只操作
document.documentElement.dataset.theme = "dark"或"light"，别改body或其他节点 - 记得在 JS 初始化时读取 localStorage，还原上次用户选择，否则每次刷新都回退到默认
localStorage 存什么、怎么读写才不踩坑
存字符串 "dark" 或 "light" 就够了，别存布尔或对象。读取时必须做兜底，因为首次访问 localStorage 是空的，getItem("theme") 返回 null，直接赋值会触发意外行为。
常见错误：用 theme === true 判断，或没处理 null 就塞进 dataset，导致 DOM 上出现 data-theme="null"，CSS 无法匹配。
- 写入：
localStorage.setItem("theme", "dark") - 读取：
const saved = localStorage.getItem("theme"); document.documentElement.dataset.theme = saved || "light"; - 不要用
JSON.stringify包一层——纯字符串更轻、更安全、不易解析失败
如何兼容 prefers-color-scheme 且不被用户选择覆盖
系统深色模式（prefers-color-scheme: dark）应该作为初始 fallback，但不能凌驾于用户手动选择之上。也就是说：用户点过“开夜间模式”，就以用户为准；没点过，才按系统来。
难点在于判断“用户是否主动选过”。最可靠的方式是检查 localStorage 是否有值，而不是监听 matchMedia 变化后自动切——那会导致用户刚切完主题，系统一变化又给顶回去。
- 初始化逻辑顺序：先查 localStorage → 有值就用它；无值则查
window.matchMedia("(prefers-color-scheme: dark)").matches→ 根据结果设默认值并写入 localStorage - 不要在
matchMedia().addEventListener里直接切主题，除非你明确想“跟随系统”，而这不是多数产品要的 - CSS 中可保留
@media (prefers-color-scheme: dark) { :root { ... } }作为兜底，但确保它的优先级低于[data-theme="dark"] :root
按钮状态和过渡动画怎么不闪、不卡
切主题瞬间如果整个页面重排，会看到白屏/黑屏闪烁。根本原因是背景色变更触发了重绘，而字体、阴影等没加过渡，显得生硬。
不是所有属性都适合加 transition，比如 background-color 可以，但 color 在部分浏览器下过渡不自然。稳妥做法是只对 background、border-color、box-shadow 加过渡，且统一用 0.2s ease。
- CSS 中写：
:root { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } - 避免对
color加过渡，尤其在body或大容器上——文本渲染延迟可能造成“先黑后灰”错觉 - 按钮点击反馈（如
:active）保持原样，别让它也随主题变透明度或颜色，否则交互感断裂 - 图标如果是 SVG 内联，记得用
fill="currentColor"，让它随color变，而不是写死fill="#000"
真正麻烦的不是切换逻辑，而是漏掉某个 div 的 background、某个 input 的 border、或者第三方组件没走 CSS 变量——这些地方一旦漏，夜间模式就等于没生效。上线前最好打开 DevTools，挨个删掉 data-theme 看哪些元素还亮着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
