1---
2title: Color themes
3description: Learn how to support light and dark modes in your app.
4---
5
6import { SnackInline, Terminal } from '~/ui/components/Snippet';
7import Video from '~/components/plugins/Video';
8import { Collapsible } from '~/ui/components/Collapsible';
9import { BoxLink } from '~/ui/components/BoxLink';
10
11Whether you are personally on team light or team dark, it's becoming increasingly common for apps to support these two color schemes. Here is an example of how supporting both modes looks in an Expo project:
12
13<Video file="guides/color-schemes.mp4" spaceAfter={30} />
14
15## Configuration
16
17Projects require additional configuration to support switching between light and dark modes for Android and iOS. However, no additional configuration is required for the web.
18
19You can configure the supported appearance styles in **app.json** with the [`userInterfaceStyle`](/versions/latest/config/app/#userinterfacestyle) property. You can also configure specific platforms to support different appearance styles by setting either [`android.userInterfaceStyle`](/versions/latest/config/app/#userinterfacestyle-2) or [`ios.userInterfaceStyle`](/versions/latest/config/app/#userinterfacestyle-1) to the preferred value.
20
21The available options are `automatic` (follow system appearance settings and notify about any change user makes), `light` (restrict the app to support light theme only), and `dark` (restrict the app to support dark theme only). The app will default to the light style if this property is absent. Here is an example configuration:
22
23```json app.json
24{
25  "expo": {
26    "userInterfaceStyle": "automatic"
27  }
28}
29```
30
31In development builds, you'll need to install the native package [`expo-system-ui`](/versions/latest/sdk/system-ui/#installation). Otherwise, the `userInterfaceStyle` property is ignored. You can also use following command to check if the project is misconfigured:
32
33<Terminal cmd={['npx expo config --type introspect']} />
34
35If the project is misconfigured, you'll see a warning as shown below:
36
37<Terminal
38  cmd={[
39    '» android: userInterfaceStyle: Install expo-system-ui in your project to enable this feature.',
40  ]}
41/>
42
43<Collapsible summary="Using bare workflow?">
44
45### Android
46
47> Appearance locking requires `[email protected]` to work correctly.
48
49Ensure that the `uiMode` flag is present on your `MainActivity` (and any other activities where this behavior is desired) in **AndroidManifest.xml**:
50
51```xml
52<activity
53...
54android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">
55```
56
57Implement the `onConfigurationChanged` method in **MainActivity.java** (`[email protected]` don't need this):
58
59```java
60import android.content.Intent; // <--- import
61import android.content.res.Configuration; // <--- import
62public class MainActivity extends ReactActivity {
63  ......
64  @Override
65  public void onConfigurationChanged(Configuration newConfig) {
66    super.onConfigurationChanged(newConfig);
67    Intent intent = new Intent("onConfigurationChanged");
68    intent.putExtra("newConfig", newConfig);
69    sendBroadcast(intent);
70  }
71  ......
72}
73```
74
75### iOS
76
77You can configure supported styles with the [UIUserInterfaceStyle](https://developer.apple.com/documentation/bundleresources/information_property_list/uiuserinterfacestyle) key in your app **Info.plist**. Use `Automatic` to support both light and dark modes.
78
79</Collapsible>
80
81## Detect the color scheme
82
83To detect the color scheme in your project, use `Appearance` and/or `useColorScheme` from `react-native`:
84
85```js App.js
86import { Appearance, useColorScheme } from 'react-native';
87```
88
89Then, you can use `useColorScheme()` hook as shown below:
90
91```js App.js
92function MyComponent() {
93  let colorScheme = useColorScheme();
94
95  if (colorScheme === 'dark') {
96    // render some dark thing
97  } else {
98    // render some light thing
99  }
100}
101```
102
103In some cases, you will find it helpful to get the current color scheme imperatively with [`Appearance.getColorScheme()` and/or listen to changes with `Appearance.addChangeListener`](https://reactnative.dev/docs/appearance).
104
105## Minimal example
106
107> Don't forget to configure your project to support the automatic color scheme as described above in [Configuration](#configuration).
108
109> [Snack](https://snack.expo.dev) is locked to light mode.
110
111<SnackInline label="useColorScheme example" dependencies={['expo-status-bar']}>
112
113```jsx
114import React from 'react';
115import { Text, StyleSheet, View, useColorScheme } from 'react-native';
116import { StatusBar } from 'expo-status-bar'; // automatically switches bar style based on theme!
117
118export default function App() {
119  const colorScheme = useColorScheme();
120
121  const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
122  const themeContainerStyle =
123    colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
124
125  return (
126    <View style={[styles.container, themeContainerStyle]}>
127      <Text style={[styles.text, themeTextStyle]}>Color scheme: {colorScheme}</Text>
128      <StatusBar />
129    </View>
130  );
131}
132
133const styles = StyleSheet.create({
134  container: {
135    flex: 1,
136    alignItems: 'center',
137    justifyContent: 'center',
138  },
139  lightContainer: {
140    backgroundColor: '#d0d0c0',
141  },
142  darkContainer: {
143    backgroundColor: '#242c40',
144  },
145  lightThemeText: {
146    color: '#242c40',
147  },
148  darkThemeText: {
149    color: '#d0d0c0',
150  },
151});
152```
153
154</SnackInline>
155
156## Tips
157
158While you're developing your project, you can change your simulator's or device's appearance by using the following shortcuts:
159
160- If working with an iOS emulator locally, you can use the <kbd>Cmd ⌘</kbd> + <kbd>Shift</kbd> + <kbd>a</kbd> shortcut to toggle between light and dark modes.
161- If using an Android Emulator, you can run `adb shell "cmd uimode night yes"` to enable dark mode, and `adb shell "cmd uimode night no"` to disable dark mode.
162- If using a real device or an Android Emulator, you can toggle the system dark mode setting in the device's settings.
163
164## Next step
165
166<BoxLink
167  title="Animation"
168  description="Learn more about integrating the react-native-reanimated library to create animations in your app."
169  href="/develop/user-interface/animation"
170/>
171