CSS变量实现主题切换需在:root定义默认变量，.dark类中覆盖变量，通过classList.toggle(‘dark’)触发重绘；状态同步应优先原生桥接存储，fallback localStorage；禁用prefers-color-scheme自动响应，避免样式冲突。
HTML5页面如何用CSS变量实现主题切换
夜间模式本质是样式批量替换，CSS自定义属性（--bg-color、--text-color等）是最轻量、最可控的方案。不用重写整套class，也不依赖JS动态改class名，所有颜色/间距/阴影都通过变量控制。
关键操作：在:root里定义默认主题变量，在.dark类里覆盖同一组变量；然后用document.documentElement.classList.toggle('dark')切换根节点class即可触发全局重绘。
- 变量命名要带语义，比如
--primary-text比--color1更易维护 - 避免在
.dark里只改背景色却漏掉border-color或placeholder色，导致局部“亮斑” - 慎用
!important覆盖变量值——它会破坏CSS变量的层叠逻辑，调试时极难追踪
WebView中保存并同步主题状态到本地
APP重启后必须记住用户上次选的主题，不能每次打开都回退到白天模式。单纯用localStorage不够：Android WebView和iOS WKWebView对localStorage持久化支持不一致，尤其在低内存清理或冷启动时可能丢失。
更稳妥的做法是：JS层读写localStorage做即时反馈，同时通过JSBridge把当前主题值（如"light"或"dark"）传给原生层，由原生代码存入SharedPreferences（Android）或UserDefaults（iOS）。
立即学习“前端免费学习笔记（深入）”；
- 首次加载页面时，优先从原生桥接接口取主题值（
window.WebViewBridge.getTheme()）， fallback才查localStorage - 切换主题后，立即调用
window.WebViewBridge.setTheme('dark')，再更新localStorage，防止桥接失败时样式错乱 - 不要在
DOMContentLoaded之前读取localStorage——部分WebView会延迟初始化存储API
适配系统级深色模式（prefers-color-scheme）的边界情况
用户开了系统深色模式，但APP内手动切回白天模式，此时@media (prefers-color-scheme: dark)仍会生效，造成样式冲突。不能直接靠媒体查询接管全部逻辑。
