按钮必须用 ，因其支持键盘操作、屏幕阅读器识别及 aria-pressed 语义；主题状态应存为字符串 "light"/"dark" 并在 内联脚本中初始化；css 必须用 html[data-theme="dark"] 根选择器统一控制变量，避免闪屏与颜色异常。
按钮必须用 <button></button>，不能用 <div> 或 <code><input type="checkbox">
用 <div onclick> 会丢失键盘焦点、无法空格/回车触发，屏幕阅读器也读不出它是“开关”；<code><input type="checkbox"> 虽能绑定状态，但默认样式难改、aria-pressed 不生效，且点击区域小、易误触。
正确写法是：<button type="button" id="theme-toggle" aria-label="切换深色模式" aria-pressed="false"></button>。其中 aria-pressed 初始值要和页面当前主题一致（比如亮色模式下设为 false），后续 JS 必须同步更新该属性。
- 按钮内容建议用 SVG 图标或 Unicode 符号（如 ☀️ / ?），避免纯文字“切换主题”，语义更清晰
- 别给按钮加
role="switch"—— 它只适用于真正有“开/关”二态语义的控件，而主题切换本质是“切换”，不是布尔开关 - 如果用 CSS 动画做日/夜过渡效果，确保
transition只作用于background、color等可动画属性，避免触发布局重排
localStorage 存什么、什么时候存、怎么读
存字符串 "light" 或 "dark"，别存 true/false 或 1/0 —— 类型混淆会导致首次加载判断失败。
关键时机只有两个：
-
初始化时：在
里放内联 script，用localStorage.getItem('theme')读取；没值就 fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches；立刻用该值设置document.documentElement.setAttribute('data-theme', ...) -
点击时：按钮
onclick里先更新 DOM（setAttribute），再同步调用localStorage.setItem('theme', nextTheme)—— 顺序不能反，否则用户点一下、页面变了但下次刷新又回退
不要等 DOMContentLoaded 再读 localStorage —— 那会闪屏；也不要每次切换都读一次再存，直接根据当前 data-theme 值推导下一个状态就行。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
CSS 里为什么必须用 html[data-theme="dark"] 而不是 .dark
挂 class 到 或 上看似差不多，但实际影响极大：.dark img 这类选择器无法命中 <img> 的伪元素（如 input::-webkit-file-upload-button），Tailwind 等工具链注入的主题也会错位，SSR 直出时更会因服务端无 JS 而渲染错误主题。
正确方式是统一用 html[data-theme="dark"] 作为根选择器：
-
:root里定义亮色变量，html[data-theme="dark"]里覆盖同名变量 - 所有组件样式都写成
html[data-theme="dark"] .btn，不依赖层级嵌套 - 媒体查询
@media (prefers-color-scheme: dark)只用于兜底，不能替代data-theme—— 它不响应手动切换
常见闪屏和颜色糊掉问题怎么修
闪屏本质是“先渲染默认主题，再 JS 补上暗黑类”，根源在于 JS 执行太晚；颜色糊掉（比如代码块 <pre class="brush:php;toolbar:false;"></pre> 在暗色背景上显示灰字）是因为没覆盖所有元素的颜色变量，或用了硬编码色值。
- 把初始化脚本塞进
最顶部，用document.documentElement.setAttribute直接操作，不等 DOM 构建完成 - 检查所有用到颜色的地方是否都用了
var(--bg-color)，包括border-color、box-shadow、svg fill，甚至::selection背景色 - OLED 屏幕用户对纯黑敏感，
--bg-color别设#000，用#121212或#1a1a1a更舒适
最常被忽略的是：CSS 变量必须在 :root 和 html[data-theme="dark"] 里都声明，哪怕值一样；否则变量未定义时会回退到 inherit 或 transparent，导致不可预料的渲染结果。
