Skip to main content

useColorScheme

import {useColorScheme} from 'react-native';

useColorScheme React hook 提供并订阅来自 Appearance 模块的配色方案更新。返回值表示当前用户首选的配色方案。该值可以稍后通过直接用户操作（例如设备设置中的主题选择）或按计划（例如遵循日/夜循环的浅色和深色主题）进行更新。

¥The useColorScheme React hook provides and subscribes to color scheme updates from the Appearance module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).

支持的配色方案​

¥Supported color schemes

  • "light"：用户更喜欢浅色主题。

    ¥"light": The user prefers a light color theme.

  • "dark"：用户更喜欢深色主题。

    ¥"dark": The user prefers a dark color theme.

  • null：用户未指定首选颜色主题。

    ¥null: The user has not indicated a preferred color theme.

注意：目前由于技术限制，当启用 Chrome 调试器时，该钩子将始终返回 "light"。

¥Note: Currently due to technical constraints, when the Chrome debugger is enabled, this hook will always return "light".

示例​

¥Example

你可以找到一个完整的示例，演示如何使用此钩子和 React 上下文来为 AppearanceExample.js 中的应用添加对浅色和深色主题的支持。

¥You can find a complete example that demonstrates the use of this hook alongside a React context to add support for light and dark themes to your application in AppearanceExample.js.