网页深色与浅色模式切换需四步：1.用JavaScript动态切换document.documentElement的class；2.用localStorage持久化用户选择并fallback至系统偏好；3.用matchMedia监听系统颜色方案变化；4.优化按钮可访问性，含aria-label、键盘支持等。
实现网页深色与浅色模式切换，核心是用 JavaScript 动态修改 document.documentElement 或特定容器的 class，并配合 CSS 变量或预设样式规则。关键是状态持久化（如记住用户上次选择）和无障碍支持（如响应系统偏好）。
1. 基础 DOM 操作：切换 class 控制主题
最常用、兼容性好、语义清晰的方式是给 <html> 标签添加/移除 class，例如 dark：
- 用
document.documentElement.classList.toggle('dark')切换状态 - 用
.add()或.remove()显式设置（适合根据条件初始化） - CSS 中通过
html { ... }和html.dark { ... }分别定义浅色/深色样式
2. 结合 localStorage 记住用户选择
避免每次刷新重置，把用户偏好存进 localStorage：
- 页面加载时读取
localStorage.getItem('theme')，比如值为'dark'就加 class - 点击切换按钮时，先更新 class，再执行
localStorage.setItem('theme', 'dark')或'light' - 建议 fallback：若 localStorage 为空，再检查
window.matchMedia('(prefers-color-scheme: dark)')
3. 响应系统级深色偏好（自动适配）
用 matchMedia 监听系统设置变化，提升体验：
立即学习“Java免费学习笔记（深入）”；
- 调用
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') - 用
mediaQuery.addEventListener('change', handler)实时响应（注意旧版用addListener） - 如果用户未手动设置主题，可默认跟随系统；若已手动设置，则忽略系统变化（避免覆盖用户意图）
4. 按钮交互与可访问性优化
让切换控件真正可用且友好：
- 按钮使用
<button type="button">，避免表单提交干扰 - 添加
aria-label，如aria-label="切换深色模式"，并随状态动态更新文字或图标 - 确保焦点可见，支持键盘
Enter/Space触发切换 - 可选：在
<html>上设置data-theme="dark"，方便 CSS 或 JS 统一读取
不复杂但容易忽略细节——class 切换要快、存储要可靠、系统偏好要尊重、交互要可达。做好这四点，深浅模式就稳了。
