Expo

Documentation

Appearance

Detect preferred color scheme (light, dark, or no preference) on iOS 13+.
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 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
  }
}