How to get color scheme (dark/light) of mobile system in React Native?

To get system preferred color scheme in Android and iOS, we can use Appearance module of React Native.

But the question is, where it is used? Actually if you are going to provide both dark and light theme in your application then there are two ways to switch the themes –

1. Provide an option to switch themes and let users use according to their choice.
2. Use the mode which user has already set in their system preferences.

If you are going with 1st option then you will need to create a <Switch> and according to selection, show the theme.

In this article, we are focusing on 2nd option where system preference regarding color scheme is fetched. We do it in this way –

import { Appearance } from 'react-native';

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

In the above snippet we are using getColorScheme() function of Appearance module to get scheme like dark or light.

But there is a problem here. We are storing the value in colorScheme constant. What if the system color mode is automatically switched to different mode? Like auto mode change due to daylight settings? Then our code keep on showing according to previous mode.

To solve this issue, we can use useColorScheme() hook. Like this –

import { Appearance } from 'react-native';

const colorScheme = useColorScheme();

// The colorScheme value will automatically
// update according to changes in color scheme

Code Example

import React, { useState } from "react";
import { View, StyleSheet, Text, Appearance, useColorScheme } from "react-native";

const App = () => {
  const colorScheme = useColorScheme();
  const colorSchemeAppearance = Appearance.getColorScheme();
  

  return (
    <View style={styles.container}>

      <Text style={styles.textStyle}>
        Appearance.getColorScheme() = {colorSchemeAppearance}
      </Text>

      <Text style={styles.textStyle}>
        useColorScheme() = {colorScheme}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    padding: 30
  },
  textStyle: {
    fontSize: 20
  }
});

export default App;

Output –

The above image shows the value of currently applied color schemes in both iOS (left) and Android (right) phones.

In our code we are using both Appearance and useColorScheme() hook methods to get the value of current display mode.

Live Demo

Conclusion

To know about the current color scheme of the mobile phone, you can use getColorScheme() function of Appearance module or use useColorScheme() hook.