AmbientLightSensor比prefers-color-scheme更适合低亮度场景，因其直接读取真实环境照度（lux），可在昏暗房间、夜间户外等物理低光条件下动态触发暗色模式，而后者仅响应静态系统主题设置，无法感知实际光照变化。
不能只靠 prefers-color-scheme 媒体查询实现“低亮度环境”下的自动切换——它只响应系统主题设置，不感知真实光照强度。
为什么 AmbientLightSensor 比 prefers-color-scheme 更适合低亮度场景
系统级 prefers-color-scheme 是静态偏好，用户设成“深色”后，哪怕白天强光下也强制暗色；而 AmbientLightSensor 能读取真实环境照度（单位：lux），在昏暗房间、夜间户外、拉上窗帘等真实低光条件下触发切换，更贴合“低亮度环境”这一需求。
-
AmbientLightSensor返回的是实时illuminance数值，典型阈值：lux 可判为弱光，<code>lux > 200通常为正常室内光照 - 它不依赖用户操作系统设置，也不受浏览器主题影响，纯物理传感器数据
- 兼容性有限：目前仅 Chromium 84+（Chrome/Edge）和 Safari 16.4+ 支持，Firefox 不支持
- 需用户授权：首次使用会触发权限提示（类似地理位置），
sensor.start()可能被拒绝
如何安全初始化 AmbientLightSensor 并 fallback 到系统偏好
必须做两层兜底：传感器不可用时降级到 matchMedia("(prefers-color-scheme: dark)")，再不行就回退到 localStorage 记住的用户选择。
- 先检查
'AmbientLightSensor' in window，再 new 实例，避免 TypeError -
sensor.onerror必须监听，常见错误是SecurityError（HTTPS 缺失或权限被拒）或NotSupportedError（浏览器不支持） - 初始化时立即读一次
sensor.illuminance，但该值初始为null，需等onreading触发后才有效 - 在
onerror回调里，手动 fallback 到系统偏好：window.matchMedia("(prefers-color-scheme: dark)").matches
如何避免低亮度切换导致的频繁抖动
环境光变化本身就有波动（如人走过遮挡光源），直接按瞬时 lux 值切换会造成闪烁。必须加滤波逻辑。
立即学习“前端免费学习笔记（深入）”；
- 不要每次
onreading都立即切主题——记录最近 3–5 次读数，取中位数或滑动平均 - 设置滞后区间（hysteresis）：从亮切暗用
lux ，从暗切亮则用 <code>lux > 80，避免在 50 上下反复横跳 - 加最小切换间隔：两次主题变更至少间隔 1.5 秒，防止传感器噪声触发误切
- 若用户已手动选择主题（
localStorage.getItem("theme")存在），则完全忽略传感器，尊重用户意图
如何与现有深色模式 CSS 架构共存
别重写整套样式，复用已有 data-theme 或 class 机制，只改状态来源。
- 保持 CSS 结构不变：
html[data-theme="dark"]或body.dark，JS 层只负责更新这个状态 - 同步更新
meta[name="color-scheme"]：低亮度触发暗色时，设content="dark"；恢复亮色时设content="light" - 若同时监听系统偏好变更（
matchMedia().addEventListener("change")），注意优先级：传感器 > 手动选择 > 系统偏好 - 传感器启用后，建议禁用系统偏好监听，避免两者冲突；仅当传感器失效时才启用 fallback 监听
真正难的不是读 lux 值，而是判断“什么时候才算够暗”——这取决于设备摆放位置（桌面 vs 手持）、传感器精度差异、甚至用户年龄对光敏感度的不同。阈值必须可配置，且最好暴露给用户微调。
