应使用 window.matchMedia 异步监听系统主题切换：先获取 MediaQueryList 实例并立即设置初始 UI 策略，再通过 addEventListener 绑定 change 事件处理函数，避免废弃 API；渲染逻辑需解耦、轻量、节流；组件卸载时必须移除监听器；SSR 环境需判断 window 存在性；不支持时降级为 localStorage 或轮询。
用 window.matchMedia 异步监听系统主题切换，关键不是“等它通知再行动”，而是建立一套响应及时、不卡顿、不重复、不泄漏的执行链——它本身是同步创建、异步触发的机制，但 UI 渲染策略的调整必须主动、轻量、可中断。
监听必须绑定 change 事件，不能只读 matches
直接调用 window.matchMedia('(prefers-color-scheme: dark)').matches 只能拿到页面加载那一刻的快照。用户后续在系统设置里切到深色模式，这个值不会自动更新。真正实现“异步监听”，靠的是：
- 获取 MediaQueryList 实例：
const mql = window.matchMedia('(prefers-color-scheme: dark)') - 立即用
mql.matches设置初始 UI 策略（比如 canvas 绘图配色、SVG 图标渲染逻辑、字体抗锯齿开关） - 必须调用
mql.addEventListener('change', handler)，handler 中根据e.matches重新决策渲染行为 - 避免使用已废弃的
addListener或onchange = handler写法，兼容性和多监听器支持差
UI 渲染策略要解耦，别在监听里写重操作
change 事件触发非常频繁（系统级切换瞬间即发），但 UI 重绘成本高。不能在回调里直接调用 ctx.clearRect() 或重建整个图表实例。推荐做法是：
- 把渲染逻辑封装成纯函数，例如
renderChart(ctx, theme)，theme 是 'light' 或 'dark' - 监听回调中只更新一个状态变量或 data-theme 属性，不操作 DOM 或画布
- 用
requestAnimationFrame节流实际绘制，确保不阻塞主线程 - 对 SVG 图标等静态资源，优先用 CSS 变量控制 fill/stroke，而非 JS 遍历修改属性
必须清理监听器，否则策略会错乱叠加
如果组件反复挂载（如 SPA 页面跳转、React/Vue 动态组件），每次新建 matchMedia 实例并绑定事件却不移除，会导致多个 handler 同时执行，UI 渲染策略被多次覆盖，出现闪烁、颜色错位、canvas 重绘冲突等问题。
- 在组件卸载、脚本退出或路由离开前，务必调用
mql.removeEventListener('change', handler) - 不要依赖全局变量缓存 handler，应确保 remove 时传入的是同一个函数引用
- 可在初始化时加个标记，例如
mql._bound = true，便于调试是否重复绑定 - SSR 环境下需包裹
if (typeof window !== 'undefined')，防止服务端报错中断渲染
降级与兜底：当系统不支持或 WebView 失效时
不是所有环境都可靠触发 change 事件（如某些安卓旧版 WebView、iOS 12 以下 Safari）。这时需轻量兜底：
- 检查支持性：
if (!window.matchMedia || window.matchMedia('(prefers-color-scheme)').media === 'not all') - 降级为 localStorage 记录的手动选择，或默认浅色
- 极少数场景可加 2~3 秒定时器轮询
mql.matches，但仅限关键 UI（如夜间阅读模式开关），不可长期运行 - 避免同时监听
light和dark两个查询，取反即可，减少冗余判断和潜在冲突
