usePreferredColorScheme Hook

usePreferredColorScheme 是一个自定义 Hook，用于检测并返回系统首选的颜色模式（浅色或深色）。它基于 window.matchMedia('(prefers-color-scheme: dark)') 进行监听，实时更新当前主题状态，让应用能够响应用户系统的主题偏好。

返回值

字段	类型	说明
`isDarkMode`	`boolean`	表示当前系统首选主题是否为深色。`true` 表示使用深色模式。
`isLightMode`	`boolean`	表示当前系统首选主题是否为浅色。`true` 表示使用浅色模式。
`themeName`	`ThemeName` (可选值: `'dark'` \| `'light'`)	当前系统主题名称。`'dark'` 代表深色模式，`'light'` 代表浅色模式。

注意：此 Hook 会在浏览器支持 prefers-color-scheme 媒体查询的前提下工作。对于不支持的环境，初始状态将默认为 'light'。

使用示例


import React from 'react';
import usePreferredColorScheme from '@/hooks/usePreferredColorScheme';
 
function ThemeIndicator() {
  const { isDarkMode, isLightMode, themeName } = usePreferredColorScheme();
 
  return (
    <div>
      <p>当前系统主题：{themeName}</p>
      {isDarkMode && <p>系统偏好为深色模式</p>}
      {isLightMode && <p>系统偏好为浅色模式</p>}
    </div>
  );
}
 
export default ThemeIndicator;

当用户系统设置为深色模式时，该 Hook 会自动监听并返回 themeName === 'dark'，并更新 isDarkMode 为 true。
若用户系统切换回浅色模式，则会触发监听器调用，更新返回值。这样你的应用就可及时响应系统主题变化。