Expo

Documentation

Appearance

expo-appearance allows you to detect the user's preferred color scheme (light, dark or no-preference) on iOS 13+ and Android 10+.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

To install this API in a managed or bare React Native app, run expo install react-native-appearance. In bare apps, make sure you also follow the react-native-appearance linking and configuration instructions.

You can configure supported appearance styles in managed apps inside app.json with the userInterfaceStyle key. You can also configure specific platform to support different appearance styles by setting either android.userInterfaceStyle or ios.userInterfaceStyle to preferred value. The available options are: automatic (follow system appearance settings and notify about any change user makes), light (restrict app to support light theme only), and dark (restrict app to support dark theme only). If this key is absent, the app will default to the light style.
Example app.json configuration:
{
  "expo": {
    "userInterfaceStyle": "automatic",
    "ios": {
      "userInterfaceStyle": "light"
    },
    "android": {
      "userInterfaceStyle": "dark"
    }
  }
}
In bare apps:

To import this library, use:
import { Appearance, AppearanceProvider, useColorScheme } from 'react-native-appearance';
Next you need to wrap your app root component with an AppearanceProvider.
import { AppearanceProvider } from 'react-native-appearance';

export default () => (
  <AppearanceProvider>
    <App />
  </AppearanceProvider>
);
Get the current color scheme imperatively with Appearance.getColorScheme() and listen to changes with Appearance.addChangeListener
let colorScheme = Appearance.getColorScheme();

let subscription = Appearance.addChangeListener(({ colorScheme }) => {
  // do something with color scheme
});

// when you're done
subscription.remove();
If you're using hooks, this is made even easier with the useColorScheme() hook:
function MyComponent() {
  let colorScheme = useColorScheme();

  if (colorScheme === 'dark') {
    // render some dark thing
  } else {
    // render some light thing
  }
}