Theming and Dark Mode

# CHAPTER 28

Theming and Dark Mode #

1. Introduction #

2. Learning Objectives #

• Detect OS-level Dark/Light mode settings.

• Utilize the React Native useColorScheme hook.

• Define a strict global Color Palette object.

• Integrate Theme variables into the StyleSheet API.

• Build a toggle system using the Context API to override system preferences.

3. Detecting the System Theme #

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

export default function BasicThemeScreen() {
  // 1. Detect the system theme!
  const theme = useColorScheme(); 
  
  // 2. Define colors dynamically based on the string
  const isDark = theme === 'dark';
  const bgColor = isDark ? '#121212' : '#FFFFFF';
  const textColor = isDark ? '#FFFFFF' : '#000000';

  return (
    <View style={{ flex: 1, backgroundColor: bgColor, justifyContent: &#039;center&#039; }}>
      <Text style={{ color: textColor }}>
        The current system theme is {theme}!
      </Text>
    </View>
  );
}

4. Architecting a Global Color Palette #

// themes/colors.js
export const Colors = {
  light: {
    background: '#FFFFFF',
    text: '#111827',
    primary: '#3B82F6', // Blue
    card: '#F3F4F6'
  },
  dark: {
    background: '#121212',
    text: '#F9FAFB',
    primary: '#60A5FA', // Lighter Blue for dark mode contrast
    card: '#1F2937'
  }
};

5. Applying the Palette (Inline vs StyleSheet) #

import React from 'react';
import { View, Text, useColorScheme } from 'react-native';
import { Colors } from './themes/colors';

export default function ProfileCard() {
  const theme = useColorScheme() ?? 'light'; // Fallback to light
  const currentColors = Colors[theme]; // Grabs the light or dark object!

  return (
    // INLINE APPLICATION:
    <View style={{ backgroundColor: currentColors.background }}>
      <Text style={{ color: currentColors.text }}>John Doe</Text>
    </View>
  );
}

6. The "User Override" Problem #

The ThemeContext Flow:

1. 1. Check AsyncStorage to see if the user saved a preference (e.g., 'dark').

1. 2. If no saved preference, fall back to useColorScheme().

1. 3. Provide a toggleTheme function that updates the Context and saves the new choice to the hard drive!

7. Building the Advanced ThemeProvider #

import React, { createContext, useState, useEffect } from 'react';
import { useColorScheme } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Colors } from './colors';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const systemTheme = useColorScheme();
  
  // State holds 'light' or 'dark'
  const [themeMode, setThemeMode] = useState(systemTheme || 'light');

  // Load user preference on boot
  useEffect(() => {
    const loadTheme = async () => {
      const savedTheme = await AsyncStorage.getItem('@theme');
      if (savedTheme) setThemeMode(savedTheme);
    };
    loadTheme();
  }, []);

  // Toggle function
  const toggleTheme = async () => {
    const newTheme = themeMode === 'light' ? 'dark' : 'light';
    setThemeMode(newTheme);
    await AsyncStorage.setItem('@theme', newTheme); // Save to disk!
  };

  // Provide the exact color object and the toggle function
  return (
    <ThemeContext.Provider value={{ colors: Colors[themeMode], toggleTheme, isDark: themeMode === &#039;dark&#039; }}>
      {children}
    </ThemeContext.Provider>
  );
};

8. Visual Learning: The Theme Hierarchy #

1. [ User Click: 'Switch to Dark Mode' ]
       |
2. [ ThemeContext: setThemeMode('dark') ] --> (Saves to Disk)
       |
3. [ Context Provider Updates ]
       |
4. [ Every Screen using useContext(ThemeContext) Re-Renders! ]
       |
5. [ UI paints with Colors.dark object ]

9. Common Mistakes #

• Applying Theme Variables Outside Components: If you define const styles = StyleSheet.create({ text: { color: currentColors.text } }) OUTSIDE of your React component function block, the theme will NEVER update. The StyleSheet.create executes exactly once when the file loads. To make stylesheets dynamic, you must generate them *inside* the component, or pass the theme into a custom style generator function.

10. Best Practices #

• React Navigation Theming: React Navigation has its own massive white header bars. If your app is in dark mode, but the top Navigation header is bright white, it breaks the illusion. You must pass your Theme object directly into the <NavigationContainer theme={MyDarkTheme}> prop in App.js to automatically style the routing components!

11. Practice Exercises #

1. 1. What built-in React Native hook reads the operating system settings to determine if the physical device is in Dark Mode?

1. 2. If a user sets their OS to Light Mode, but manually toggles Dark Mode inside your app's Settings screen, where must you save that preference so it survives an app restart?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the necessity of combining useColorScheme, Context API, and AsyncStorage to build a production-grade theme system. Why is relying on useColorScheme alone insufficient?

• Q: Describe the mechanical flaw of utilizing StyleSheet.create() outside of a component function when attempting to apply dynamic theme variables. How do you resolve this?

• Q: How do you ensure that third-party UI libraries (like React Navigation or UI Kitten) remain perfectly synchronized with your custom application theme state?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #