Dark mode en React Native: implementación completa

Dark mode en 2026

El 82% de los usuarios usa dark mode cuando está disponible en su dispositivo. Una app que no lo soporta parece desactualizada y puede generar reviews negativas. En Deepyze implementamos dark mode en todos los proyectos nuevos.

Detectar el tema del sistema

import { useColorScheme } from 'react-native';

function App() {
  const colorScheme = useColorScheme(); // 'dark' | 'light' | null
  const isDark = colorScheme === 'dark';
}

Sistema de colores con Theming

const colores = {
  light: {
    fondo: '#FFFFFF',
    texto: '#111827',
    textoSecundario: '#6B7280',
    tarjeta: '#F9FAFB',
    borde: '#E5E7EB',
    primario: '#7C3AED',
  },
  dark: {
    fondo: '#0F0F0F',
    texto: '#F9FAFB',
    textoSecundario: '#9CA3AF',
    tarjeta: '#1A1A1A',
    borde: '#2D2D2D',
    primario: '#A78BFA',
  },
};

Context para el tema

const TemaContext = createContext();

export function TemaProvider({ children }) {
  const sistemaOscuro = useColorScheme() === 'dark';
  const [modoOscuro, setModoOscuro] = useState(sistemaOscuro);

  const tema = modoOscuro ? colores.dark : colores.light;

  return (
    <TemaContext.Provider value={{ tema, modoOscuro, setModoOscuro }}>
      {children}
    </TemaContext.Provider>
  );
}

export const useTema = () => useContext(TemaContext);

Uso en componentes

function Tarjeta({ titulo }) {
  const { tema } = useTema();
  return (
    <View style={{ backgroundColor: tema.tarjeta, borderColor: tema.borde }}>
      <Text style={{ color: tema.texto }}>{titulo}</Text>
    </View>
  );
}

¿Querés que implementemos dark mode en tu app? Hablá con Deepyze.