检测系统配色方案

prefers-color-scheme CSS 媒体查询可以检测用户是否已将操作系统配置为使用深色或浅色配色主题。它接受两个值：dark 和 light。此偏好在操作系统级别的系统设置中设定，而不是在浏览器中设定。

您可以仅使用 CSS，通过 @media (prefers-color-scheme: dark) { ... } 应用深色样式。在此代码块中，您可以覆盖颜色、背景和边框，使其适合深色调色板。这种方式不需要 JavaScript，即使在 React 挂载之前也能正常工作。

在 JavaScript 中，window.matchMedia('(prefers-color-scheme: dark)') 会返回一个 MediaQueryList 对象。您可以在 React 钩子或事件处理函数中使用它，以编程方式读取当前的系统偏好。这是 CSS 媒体查询与 JS 逻辑之间的桥梁。

MediaQueryList 对象具有一个 matches 属性，该属性返回布尔值。如果 matches 为 true，系统处于深色模式；如果为 false，系统处于浅色模式。您通常会在挂载时读取一次它，以初始化主题状态。

用户可以随时更改操作系统的配色方案。要动态响应变化，请调用 mediaQuery.addEventListener('change', handler)，其中 handler 会接收更新后的 MediaQueryListEvent。事件对象还具有一个 matches 布尔值，用于反映新的偏好。

一种简洁的方式是使用 useSyncExternalStore 构建自定义钩子。该钩子订阅 mediaQuery.addEventListener，并提供一个返回 mediaQuery.matches 的快照函数。这样无需手动管理状态，钩子也能与浏览器外部接口保持同步。

组件卸载时，您必须移除事件监听器，以避免内存泄漏。在 useEffect 清理函数中调用 mediaQuery.removeEventListener('change', handler)。使用 useSyncExternalStore 时，订阅函数必须返回一个执行相同操作的取消订阅函数。

系统偏好是操作系统报告的偏好。但用户通常希望独立覆盖应用主题，例如在操作系统处于深色模式时仍让应用保持浅色。您的架构应区分系统默认值和存储在 localStorage 中的明确用户覆盖设置。

Chrome DevTools 允许您模拟配色偏好，而无需更改操作系统设置。打开 DevTools，转到“渲染”选项卡，然后找到“模拟 CSS 媒体功能 prefers-color-scheme”下拉菜单。在开发过程中，这对于快速测试两种主题非常有用。

良好的深色模式实现会将系统偏好作为默认起点，并立即应用它。这体现了对用户无障碍设置的尊重。只有在用户明确切换应用中的主题后，您才应存储并使用不同的覆盖设置。

在服务器上，window.matchMedia 不存在。如果您在服务器上渲染，请在调用 matchMedia 前使用 typeof window !== 'undefined' 进行保护。对于 SSR 应用，请改为从 Cookie 或 HTTP 标头中读取用户偏好，以避免水合不匹配。

MediaQueryList 对象的哪个属性可以告诉您媒体查询当前是否匹配？

prefers-color-scheme 媒体查询可以在 CSS 和 JavaScript 中公开操作系统的配色偏好。使用 window.matchMedia 读取变化并监听变化，始终清理事件监听器，并区分系统默认值和用户覆盖设置。Chrome DevTools 的模拟功能可以加快两种主题的测试。