HTML暗黑模式需手动实现，不自动同步系统主题；可用prefers-color-scheme媒体查询监听系统偏好，但需window.matchMedia动态响应变化；CSS应使用自定义属性统一管理，并显式重置原生控件样式；localStorage需在加载时读取并应用，注意iOS无痕模式限制。
HTML 暗黑模式本身不会改变操作系统主题，它只是在网页内模拟暗色样式，和系统级主题无自动联动。是否启用、如何响应、何时切换，全靠开发者手动实现或用户主动触发。
浏览器不自动读取系统暗黑偏好？用 prefers-color-scheme 媒体查询
现代浏览器（Chrome 76+、Firefox 67+、Safari 12.1+）支持 prefers-color-scheme，但默认不强制同步系统设置——它只提供一个“用户倾向”信号，需你主动监听：
-
@media (prefers-color-scheme: dark)可用于 CSS 中条件加载暗色规则，但仅生效于首次渲染；页面运行中系统切换主题时，部分旧版 Safari 需刷新才响应 - JavaScript 中监听变化要靠
window.matchMedia，不能只靠load事件判断一次：const mql = window.matchMedia('(prefers-color-scheme: dark)');<br>mql.addEventListener('change', e => {<br> document.documentElement.classList.toggle('dark', e.matches);<br>}); - 注意：Windows/Linux 的“深色应用模式”和 macOS 的“深色外观”都会触发该媒体查询，但 Android/iOS Webview 支持不稳定，某些 WebView 内核（如旧版 Android System WebView）会直接忽略
HTML 元素 class 切换后样式没生效？检查选择器权重和属性覆盖
加了 class="dark" 却没变暗，大概率是 CSS 优先级或属性未覆盖到位：
- 避免只写
.dark { color: #ccc; }就完事——基础色值常被更具体的选择器（如body p { color: #333; }）盖掉，建议用html.dark p或提升到 :root 变量层 - 推荐用 CSS 自定义属性统一管理：
:root {<br> --text-primary: #333;<br> --bg-surface: #fff;<br>}<br>html.dark {<br> --text-primary: #ddd;<br> --bg-surface: #1e1e1e;<br>}再在组件中用color: var(--text-primary) - 图片、SVG、
<input>等原生控件默认不响应 class，需显式重置：html.dark input { background: #2d2d2d; border-color: #444; }
用户手动切换暗黑模式后 localStorage 不持久？别漏掉初始化逻辑
用户点按钮切暗色，刷新就回亮色——常见原因是没在页面加载时从 localStorage 读取并应用状态：
立即学习“前端免费学习笔记（深入）”；
- 先读取：
const savedTheme = localStorage.getItem('theme'); - 再决定初始 class：
document.documentElement.classList.toggle('dark', savedTheme === 'dark'); - 最后绑定切换逻辑（否则首次加载永远按系统偏好走，无视用户上次选择）
- 额外提醒：iOS Safari 的无痕模式禁止写入
localStorage，此时应 fallback 到sessionStorage或内存缓存，并提示用户“当前为隐私浏览，设置将不保存”
真正难的不是加个 dark class，而是让所有颜色、阴影、边框、图标、表单反馈、第三方组件（比如 CodeMirror、Chart.js）都一致响应；尤其当项目用了 CSS-in-JS 或 Shadow DOM，变量穿透和作用域隔离会让主题逻辑分散在多个地方，改一处漏三处很常见。
