How to Implement Dark Mode in React Native: A Step-by-Step Guide

In 2024, dark mode has become a must-have feature for mobile applications. It not only improves aesthetics but also enhances user experience by reducing eye strain and saving battery life on OLED screens. With React Native’s flexibility, implementing dark mode is straightforward and effective.

In this blog post, we’ll walk you through how to implement dark mode in a React Native app using useContext for theme management and best practices for a seamless user experience.

---

Why Implement Dark Mode?

Dark mode offers several benefits:

• Reduced eye strain: Especially in low-light environments.
• Battery saving: On OLED screens, dark pixels consume less energy.
• User preference: Many users now expect this feature as standard.

---

Key Steps to Implement Dark Mode

1. Set Up Theme Context

To manage light and dark themes, we’ll create a ThemeContext using React’s Context API.

Code Example:

import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext({});

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => setIsDarkMode(!isDarkMode);

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

---

2. Define Light and Dark Themes

Create separate theme objects for light and dark modes.

Code Example:

export const lightTheme = {
  background: '#FFFFFF',
  text: '#000000',
  button: '#007BFF',
};

export const darkTheme = {
  background: '#121212',
  text: '#FFFFFF',
  button: '#BB86FC',
};

---

3. Apply Themes in the App

Wrap your app with the ThemeProvider and apply the theme dynamically based on isDarkMode.

Code Example:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ThemeProvider, useTheme } from './ThemeContext';
import { lightTheme, darkTheme } from './themes';

const App = () => {
  const { isDarkMode, toggleTheme } = useTheme();
  const theme = isDarkMode ? darkTheme : lightTheme;

  return (
    <View style={[styles.container, { backgroundColor: theme.background }]}>
      <Text style={[styles.text, { color: theme.text }]}>Hello, Dark Mode!</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} color={theme.button} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 18, marginBottom: 20 },
});

export default () => (
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

---

4. Detect System Theme Automatically

Use React Native’s Appearance API to detect the user’s system theme.

Code Example:

import { Appearance } from 'react-native';

const systemTheme = Appearance.getColorScheme(); // 'light' or 'dark'

Update the ThemeProvider to initialize isDarkMode based on the system theme:

const [isDarkMode, setIsDarkMode] = useState(Appearance.getColorScheme() === 'dark');

---

5. Persist Theme Preference

To save the user’s theme preference, use AsyncStorage.

Code Example:

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveThemePreference = async (isDarkMode: boolean) => {
  try {
    await AsyncStorage.setItem('theme', JSON.stringify(isDarkMode));
  } catch (e) {
    console.error('Failed to save theme preference');
  }
};

const loadThemePreference = async () => {
  const savedTheme = await AsyncStorage.getItem('theme');
  return savedTheme ? JSON.parse(savedTheme) : null;
};

---

Best Practices for Implementing Dark Mode

1. Test all UI components: Ensure colors and contrast ratios meet accessibility standards.
2. Handle images carefully: Provide dark mode-specific images if needed.
3. Use transparent components wisely: Ensure overlays blend well with dark themes.

---

Dark Mode in Popular Libraries

Many React Native libraries support dark mode out of the box:

• react-navigation: Pass a theme object to customize navigation styles.
• react-native-paper: Offers built-in support for light and dark themes.

---

Conclusion

Implementing dark mode in a React Native app is straightforward and significantly enhances user experience. By leveraging React Context, Appearance API, and AsyncStorage, you can create a seamless theme-switching experience for your users.

---

FAQs

1. Can I enable dark mode based on system preferences?
Yes, use the Appearance API to detect the system theme and apply it dynamically.

2. How do I handle third-party libraries in dark mode?
Check if the library supports dark mode. If not, override its styles with your theme.

3. Does dark mode affect app performance?
No, dark mode is purely a UI change and does not impact performance.