Respond 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).

import { useColorScheme } from 'react-native';
const colorScheme = useColorScheme();


Return value

useColorScheme returns the color scheme value.

colorScheme "dark" | "light" | null

A string representing the color scheme.

React Native for WebCopyright © Nicolas Gallagher and Meta Platforms, Inc.