应优先使用 localStorage 存储用户手动选择的主题，并在首次加载时以 prefers-color-scheme 为默认值；切换时需同步更新 data-theme 属性、meta[name="color-scheme"] 及 CSS 规则，按钮须用 button 元素+JS 控制并支持 aria-pressed 与系统主题变更监听。
用 prefers-color-scheme 检测系统偏好，但别只靠它
用户点按钮切夜间模式，不是等系统变暗才响应——prefers-color-scheme 只能读取系统设置，不能触发手动切换。它适合做默认值（比如用户第一次访问时自动按系统设为深色），但不能替代按钮逻辑。
常见错误是把 prefers-color-scheme: dark 当成开关，结果点了按钮没反应，或者刷新后又回退到系统状态。
- 首次加载时，先查
prefers-color-scheme，再读本地存储的用户选择（优先级更高） - 按钮点击后，必须显式修改
document.documentElement的 class 或 data 属性 - CSS 中避免只写
@media (prefers-color-scheme: dark)，要配合自定义 class（如.theme-dark）写双重规则
给 data-theme 而不是改 class
用 data-theme="dark" 比 class="dark" 更稳妥：前者语义清晰、不干扰已有 class（比如你用了 Tailwind 或 BEM），也方便 JS 精确控制和 CSS 层级隔离。
性能上没区别，但兼容性和可维护性高很多。老项目里如果已有 .dark class 被其他样式污染，切换就容易错乱。
- JS 切换时用
document.documentElement.dataset.theme = "dark"（设空字符串可清空） - CSS 写
html[data-theme="dark"] { ... }，不要漏掉html前缀，否则可能被子元素样式覆盖 - 服务端渲染（如 SSR）场景下，这个 data 属性也能被提前注入，避免闪屏
localStorage 存主题时，记得同步更新
安卓 Chrome 和新版 Safari 会读 来决定地址栏、表单控件等系统 UI 颜色。但这个 meta 不会自动随 JS 切换更新——存了 localStorage 却忘了它，会导致浏览器 UI 还是亮色，而页面已变暗，视觉割裂。
错误现象：夜间模式下，输入框边框还是浅灰，地址栏仍是白色。
- 每次设置主题后，同步改 meta：
document.querySelector('meta[name="color-scheme"]').content = "light dark" - 初始加载时也要从
localStorage读一次，再设 meta，不然首屏不匹配 - 注意：Safari 对该 meta 支持较好，Chrome 从 93+ 开始支持，旧版忽略它也不报错
按钮本身别用 :checked + label 实现纯 CSS 切换
用 checkbox + label + :checked 伪类实现夜间按钮，看似无 JS，实则隐患多：无法持久化、无法响应外部变化（如系统主题变更）、无法与 prefers-color-scheme 协同。而且一刷新，状态就丢。
更麻烦的是，这种写法会让按钮失去可访问性（screen reader 读不出当前状态），也难加动画过渡。
- 按钮必须用
，绑定click事件，显式调用切换函数 - 用
aria-pressed="true/false"标记当前状态，辅助技术可感知 - 切换时加
transition: background-color 0.2s, color 0.2s，但别对整个html加 transition，会拖慢渲染
最易被忽略的其实是「用户改了系统主题，但网页没响应」——这需要监听 matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ...)，且仅在用户未手动设置过主题时才自动同步。手动优先级永远高于系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
