useColorScheme() returns 'light' or 'dark' (or null without the native Appearance module) and re-renders your component when that changes. In React Native 0.86 36,878 it is a thin layer over React 7,897 's useSyncExternalStore(), which reads a value from outside React and subscribes to its changes:
const subscribe = (onStoreChange: () => void) => {
const appearanceSubscription = addChangeListener(onStoreChange);
return () => appearanceSubscription.remove();
};
export default function useColorScheme(): ?ColorSchemeName {
return useSyncExternalStore(subscribe, getColorScheme);
}On Android, AppearanceModule emits the change when the activity's night mode changes, re-rendering every caller (Building a Dark Mode Toggle logs it). A StyleSheet.create() that reads Appearance.getColorScheme() at load time keeps its first answer forever, so call the hook inside components.