Appearance

Detect preferred color scheme (light, dark, or no preference) on iOS 13+.

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 ios.userInterfaceStyle key. If this key is absent, the light style will be forced. If you'd like to allow the user to switch their preferred style in operating system preferences and detect that with the Appearance API, you should set userInterfaceStyle to "automatic":
{
  "expo": {
    "ios": {
      "userInterfaceStyle": "automatic"
    }
  }
}
In bare apps, you can configure supported styles with the UIUserInterfaceStyle key in your app Info.plist.

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
  }
}
Below you can find an example of a simple application utilizing color scheme of the system:
import React from 'react';
import { Text, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
import { AppearanceProvider, useColorScheme } from 'react-native-appearance';

export default function AppContainer() {
  return (
    <AppearanceProvider>
      <App />
    </AppearanceProvider>
  );
}

function App() {
  const colorScheme = useColorScheme();

  const themeStatusBarStyle =
    colorScheme === 'light' ? 'dark-content' : 'light-content';
  const themeTextStyle =
    colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
  const themeContainerStyle =
    colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;

  return (
    <SafeAreaView style={[styles.container, themeContainerStyle]}>
      <StatusBar barStyle={themeStatusBarStyle} />
      <Text style={[styles.text, themeTextStyle]}>
        Color scheme: {colorScheme}
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lightContainer: {
    backgroundColor: '#D0D0C0',
  },
  darkContainer: {
    backgroundColor: '#242C40',
  },
  lightThemeText: {
    color: '#242C40',
  },
  darkThemeText: {
    color: '#D0D0C0',
  },
});