应使用元素实现主题切换按钮，因其原生支持焦点、键盘交互（空格/回车触发）和aria-pressed等无障碍属性；若用或需手动补全逻辑，易导致屏幕阅读器不可读、键盘用户无法操作等问题。
主题切换按钮该用什么 HTML 元素
用 <button></button>，别用 <div> 或 <code><a></a>。前者原生支持焦点、键盘交互（空格/回车触发）、无障碍属性（aria-pressed），后者要手动补一堆逻辑才勉强可用。
常见错误是套个 <div onclick="toggleTheme()"> —— 这样屏幕阅读器读不出它是按钮，键盘用户按 Tab 键会跳过它，还可能被浏览器阻止焦点进入。
<ul>
<li>必须加 <code>type="button"，防止表单内误提交
aria-pressed 属性实时反映当前状态：aria-pressed="true" 表示深色已激活:focus-visible 做可见焦点样式，别只靠 :focus
如何用 CSS 自定义属性（CSS Custom Properties）存主题变量
把颜色、字体、背景等抽成 --bg-color、--text-color 这类变量，挂载在 :root 下，主题切换只需切换根元素的 class，变量值随之批量更新。
别用 JS 直接改每个元素的 style —— 维护成本高、无法利用 CSS 级联、动画难做。
- 深色主题 class 命名建议用
theme-dark，而不是dark-mode，避免和系统偏好名冲突 - 变量定义要带 fallback：
color: var(--text-color, #333);，防止 JS 未加载时白屏 - 所有主题变量必须声明在
:root，不能写在.theme-dark选择器里再覆盖 —— 否则变量作用域错乱
JS 切换主题时要不要存 localStorage
要存，但得在首次访问时优先读取系统偏好（prefers-color-scheme），再 fallback 到 localStorage，否则用户刚打开页面就强制亮色，体验突兀。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
常见坑是只存不读，或读取时机太晚（比如 DOMContentLoaded 后才读），导致页面先闪一次默认主题。
- 读取顺序：系统偏好 → localStorage → 默认主题（如 light）
- 写入时机：调用
toggleTheme()后立刻localStorage.setItem('theme', 'dark') - 监听系统变化：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，但仅用于同步 UI，不自动切主题（尊重用户手动选择）
为什么 toggleTheme() 函数里要同时操作 class 和 document.documentElement
因为 document.body.classList.toggle('theme-dark') 是错的 —— 主题变量定义在 :root，body 上加 class 不影响根变量。必须操作 document.documentElement（即 元素）。
另一个坑是用了 document.querySelector(':root').className —— :root 不是真实 DOM 节点，不能这样查。
- 正确写法：
document.documentElement.classList.toggle('theme-dark') - 切换前先清除其他主题 class：
document.documentElement.className = ''或用classList.replace() - 确保 CSS 中
.theme-dark :root写法无效，必须是.theme-dark直接作用于:root的后代计算，所以 class 必须加在 html 上
