Documentation Index
Fetch the complete documentation index at: https://mintlify.com/facebook/react-native/llms.txt
Use this file to discover all available pages before exploring further.
The Appearance module exposes information about the user’s appearance preferences, such as their preferred color scheme (light or dark).
Methods
getColorScheme()
static getColorScheme(): 'light' | 'dark' | null
useColorScheme hook.
Returns:
'light' - Light color scheme is preferred'dark' - Dark color scheme is preferrednull - No preference or unable to determine
Example:
import { Appearance } from 'react-native';
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// Use dark mode colors
}
setColorScheme()
static setColorScheme(colorScheme: 'light' | 'dark' | 'unspecified'): void
colorScheme: The color scheme to set
'light' - Light mode'dark' - Dark mode'unspecified' - Use system default
Example:
import { Appearance } from 'react-native';
// Force dark mode
Appearance.setColorScheme('dark');
// Use system preference
Appearance.setColorScheme('unspecified');
addChangeListener()
static addChangeListener(
listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void
): EventSubscription
listener: Function to call when the color scheme changes
Returns:
EventSubscription object with a remove() method to unsubscribe
Example:
import { Appearance } from 'react-native';
const subscription = Appearance.addChangeListener(({colorScheme}) => {
console.log('Color scheme changed to:', colorScheme);
// Update your app's theme
});
// Later, remove the listener
subscription.remove();
Hook
For functional components, use the useColorScheme hook instead:
import { useColorScheme } from 'react-native';
function MyComponent() {
const colorScheme = useColorScheme();
return (
<View style={{
backgroundColor: colorScheme === 'dark' ? '#000' : '#fff'
}}>
<Text>Current scheme: {colorScheme}</Text>
</View>
);
}
- iOS: Reflects the system-wide appearance setting from Settings > Display & Brightness
- Android: Reflects the system dark theme setting (Android 10+)
- Web: May reflect the browser/OS preference via
prefers-color-scheme media query