Dark and Light Mode in React Native with Restyle

Professional Theme Switching with Restyle

Dark mode has become an essential feature in modern mobile applications. Users expect seamless theme switching that respects their system preferences while allowing manual overrides. Restyle, combined with React Context, provides an elegant solution for implementing comprehensive theme management.

This guide demonstrates how to build a production-ready theme system with automatic system preference detection, persistent user preferences, and smooth transitions between light and dark modes.

Theme Structure

Start by defining separate light and dark themes with consistent structure but different color values. This ensures all your components work correctly in both modes.

// themes.ts
const lightTheme = {
  colors: {
    background: '#FFFFFF',
    foreground: '#000000',
    primary: '#007AFF',
    card: '#F2F2F7',
  },
  spacing: { s: 8, m: 16, l: 24 },
};

const darkTheme = {
  ...lightTheme,
  colors: {
    background: '#000000',
    foreground: '#FFFFFF',
    primary: '#0A84FF',
    card: '#1C1C1E',
  },
};

Theme Context Provider

Create a context provider that manages theme state, detects system preferences, and provides theme switching functionality throughout your app.

// ThemeProvider.tsx
import React, { createContext, useState, useEffect } from 'react';
import { useColorScheme } from 'react-native';

export const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
});

export const ThemeProvider = ({ children }) => {
  const systemTheme = useColorScheme();
  const [theme, setTheme] = useState(systemTheme || 'light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

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

Building Theme-Aware Components

With your theme context in place, create components that automatically adapt to theme changes. This includes buttons, cards, toggles, and other UI elements.

• Buttons - Adaptive colors and states for both themes
• Cards - Background and border colors that switch seamlessly
• Toggles - Theme switcher component with smooth animations

System Preference Detection

Learn how to detect and respond to system-level theme changes, ensuring your app automatically adapts when users change their device settings.

Persistent Theme Preferences

Implement AsyncStorage integration to remember user theme preferences across app sessions, providing a consistent experience every time they open your app.

Best Practices

Follow these best practices for professional theme implementation:

• Test all components in both light and dark modes
• Ensure sufficient contrast for accessibility
• Use semantic color names (not literal colors)
• Implement smooth transitions between themes

Build Beautiful Mobile Apps

For Developers: AI Mobile Launcher includes production-ready dark/light mode support with Restyle, automatic system detection, and persistent preferences.

For Founders: Need a mobile app with polished theming? Contact CasaInnov for expert development.