React Native Dark Theme

The Appearance module in React Native is essential for detecting and responding to theme changes on a device. To implement dark mode, you can use the useColorScheme() hook from React Native.

Next, utilize the useColorScheme() hook to identify the system's current theme. This hook returns 'dark' if the system theme is set to dark mode and 'light' if it's set to light mode.

By leveraging the Appearance module, you can detect whether the current theme is dark or light and adjust your app's styling accordingly.

import React from 'react';
import { View, Text, useColorScheme } from 'react-native';

const App = () => {
  const theme = useColorScheme();
  const isDarkTheme = theme === 'dark';

  return (
      <View
          style={[
            {
              flex: 1,
              justifyContent: 'center',
              alignItem: 'center',
            },
            isDarkTheme
              ? { backgroundColor: 'black' }
              : { backgroundColor: 'white' },
          ]}>
          <Text style={[isDarkTheme ? { color: 'white' } : { color: 'black' }]}>
            This is demo of default dark/light theme using appearance.{' '}
          </Text>
     </View>
  );
}

export default App;