Skip to main content

Dark Mode

Expo​

If your using Expo you need to install this package:

sh
yarn add expo-system-ui
sh
yarn add expo-system-ui

You can configure it to automatically change by adding this to your expo app config.

json
{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}
json
{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}

To use a specific theme you can change automatic to a specific theme such as dark.

Manually overriding​

To manually change the theme while the app is running you can use the React Native Appearance API.

typescript
import {Appearance} from 'react-native';
Appearance.setColorScheme('dark');
typescript
import {Appearance} from 'react-native';
Appearance.setColorScheme('dark');