Skip to main content
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
Returns the current color scheme preference. The value may change, so you should not cache it without listening to changes or using the useColorScheme hook. Returns:
  • 'light' - Light color scheme is preferred
  • 'dark' - Dark color scheme is preferred
  • null - 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
Updates the current color scheme to the supplied value. Parameters:
  • 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
Add an event handler that is fired when appearance preferences change. Parameters:
  • 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>
  );
}

​
Platform Differences

  • 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

Build docs developers (and LLMs) love

Get started for freeTalk to us