⚠️Thereact-native-appearance
package has been replaced by Appearance and useColorScheme fromreact-native
. Thereact-native-appearance
package will be removed from the Expo SDK in SDK 43.
react-native-appearance
allows you to detect the user's preferred color scheme (light
, dark
or no-preference
) on iOS 13+ and Android 10+.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install react-native-appearance
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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.{ "expo": { "userInterfaceStyle": "automatic", "ios": { "userInterfaceStyle": "light" }, "android": { "userInterfaceStyle": "dark" } } }
react-native-appearance
repo.import { Appearance, AppearanceProvider, useColorScheme } from 'react-native-appearance';
AppearanceProvider
.import { AppearanceProvider } from 'react-native-appearance'; export default () => ( <AppearanceProvider> <App /> </AppearanceProvider> );
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();
useColorScheme()
hook:function MyComponent() { let colorScheme = useColorScheme(); if (colorScheme === 'dark') { // render some dark thing } else { // render some light thing } }
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', }, });
command
+ shift
+ a
shortcut to toggle between light and dark mode.adb shell "cmd uimode night yes"
to enable dark mode, and adb shell "cmd uimode night no"
to disable dark mode.