能，但必须监听 change 事件而非只读 matches；localStorage 设置应优先于系统偏好；通过 window.matchMedia('(prefers-color-scheme: dark)').matches 获取当前系统主题，需用 addEventListener 监听变化并及时清理，配合 CSS 媒体查询和 data-theme 实现样式与 favicon/SVG 同步切换。
能，但必须监听 change 事件，不能只读一次 matches；手动设置（localStorage）应优先于系统偏好，否则用户点一下“切深色”又自动被系统拉回浅色。
怎么拿到当前系统是深色还是浅色
直接调用 window.matchMedia('(prefers-color-scheme: dark)').matches 就行，返回 true 表示系统当前处于深色模式。
注意：matches 是快照值，不是响应式信号——页面打开后用户在系统设置里切换了主题，它不会自己变。
也不用同时查 light 和 dark，查一个取反即可，避免旧浏览器实现不一致导致逻辑翻车。
为什么监听了 change 却没反应
常见原因有三个：
• 没在组件卸载或页面离开前调用 removeEventListener，多次挂载后回调执行多次，样式反复 toggle
• 在 SSR 环境（如 Next.js、Nuxt）中未加 typeof window !== 'undefined' 守卫，服务端执行报错，前端 JS 直接中断
• 把 onchange = handler 当成标准写法用了，但部分环境不支持，必须用 addEventListener('change', handler)
怎么让 CSS 样式跟着系统主题自动更新
JS 只负责“通知”，CSS 负责“呈现”。推荐组合写法：
• 在 :root 中定义基础变量，比如 --bg-color: #fff
• 用 @media (prefers-color-scheme: dark) 覆盖同名变量：:root { --bg-color: #121212; }
• 所有元素用 background: var(--bg-color) 引用，不用 JS 操作 class 或 style
• 若需手动覆盖（比如用户点了“强制深色”），给 <html> 加 data-theme="dark"，并在 CSS 中写 html[data-theme="dark"] { --bg-color: #121212; }，优先级高于媒体查询
favicon 和 SVG 图标怎么同步切换
它们不支持媒体查询，必须靠 JS 动态换：
• 准备两套资源：/favicon-dark.png 和 /favicon-light.png，路径大小写敏感，Linux 服务器上错一个字母就 404
• 用 document.querySelector("link[rel='icon']") 获取节点，不要用 document.head.children[0]
• 更新时加时间戳破缓存：favicon.href = isDark ? '/favicon-dark.png?v=' + Date.now() : '/favicon-light.png?v=' + Date.now()
• Safari 有时不重载，得补一句 favicon.rel = 'icon' 强制刷新
• SVG 图标同理：监听到变化后，用 setAttribute('src', ...) 或替换内联 <svg> 的 fill/stroke 值
最容易漏掉的是 SSR 守卫和事件清理——前者导致构建失败或白屏，后者让监听器越积越多，最终页面一动就触发七八次主题切换。
