Diseño de emails en modo oscuro: consejos para ecommerce

Diseñas una hermosa campaña de correo electrónico. Los colores están en la marca, el diseño está limpio, y la fotografía del producto se ve impresionante. Luego un suscriptor lo abre en modo oscuro y ve: cajas blancas alrededor de sus imágenes, logos invisibles, y texto de neón sobre fondo negro.

Más del 80% de los usuarios de teléfonos inteligentes tienen el modo oscuro habilitado, y la mayoría de los clientes de correo electrónico ahora lo apoyan. Si no estás diseñando para el modo oscuro, una parte significativa de tu audiencia está viendo una versión rota de tu correo electrónico. Así es como arreglarlo.

Cómo el modo oscuro realmente funciona en el correo electrónico

A diferencia de los navegadores web (donde controlas el modo oscuro con CSS), los clientes de correo electrónico manejan el modo oscuro de tres maneras fundamentalmente diferentes. Comprender estas tres estrategias de renderización es la clave para diseñar correos electrónicos que sobreviven a todos ellos.

Estrategia 1: No Cambio

Algunos clientes de correo electrónico muestran su email exactamente como lo codificaste, independientemente del modo oscuro. Su fondo ligero permanece ligero, su texto oscuro permanece oscuro. No hay alteraciones.

Estrategia 2: Inversión parcial

El cliente de correo electrónico cambia los fondos ligeros al texto oscuro y oscuro a la luz, pero deja solo elementos ya oscuros. Este es el comportamiento más común. Si su email tiene un fondo blanco con texto oscuro, se convierte en un fondo oscuro con texto claro. Pero si una sección ya tiene un fondo oscuro, permanece sin cambios.

Estrategia 3: Inversión total

El cliente de correo electrónico invierte todo — todos los colores son volteados independientemente de sus valores originales. Este es el comportamiento más agresivo y el que causa los problemas más de diseño. La aplicación móvil de Gmail en Android utiliza este enfoque.

Cómo cada cliente de correo electrónico maneja el modo oscuro

El desafío es que cada cliente de correo electrónico principal maneja el modo oscuro de manera diferente:

El viaje: no puede confiar en CSS para controlar el modo oscuro en clientes de correo electrónico. Necesitas diseñar defensivamente para que tu email parezca aceptable independientemente de cuál sea la estrategia de renderización se utilice.

El 7 Más Común Modo Oscuro Errores

Estos son los temas que más a menudo vemos en las campañas de email del comercio electrónico:

1. Antecedentes blancos puros

A #FFFFFF fondo voltea a negro puro en modo oscuro. Si su marca utiliza una estética blanca limpia, esto puede sentir jeringa. La solución: use un blanco muy ligeramente apagado como F9FAFB o FFAFAFA. Algunos clientes tratan el blanco cercano de manera diferente que el blanco puro, reduciendo la agresividad de la inversión.

2. Logos oscuros sobre fondos transparentes

Este es el desastre más común del modo oscuro. Su logotipo oscuro se sienta en un PNG transparente, que se ve genial en un fondo de correo electrónico blanco. En modo oscuro, ese fondo se vuelve oscuro y su logotipo desaparece. Agregue siempre un trazo blanco o padding alrededor de logotipos oscuros, o exporte con un fondo de luz sólido.

3. Texto horneado en imágenes sin amortiguador

Si su imagen de héroe tiene texto oscuro sobre una sección de luz, el modo oscuro no cambiará la imagen misma, pero cambiará el fondo alrededor de ella. Esto puede crear un cambio de contraste incómodo entre la imagen y el fondo de correo electrónico.

4. Tipografía

Las fuentes de peso ligero (300 o más ligero) se vuelven más difíciles de leer cuando se reproduce como texto ligero en un fondo oscuro. Los golpes más delgados pierden la definición. Utilizar letra-peso 400 o superior para el texto corporal para garantizar la legibilidad en ambos modos.

5. Colores altamente saturados

Los colores que se ven vibrantes en blanco pueden convertirse en entrenamientos oculares en fondos oscuros. Rojos saturados, verdes y azules parecen brillar en modo oscuro. Pruebe sus colores de marca contra oscuros fondos y considere usar versiones ligeramente desaturadas para el correo electrónico.

6. No hay texto alternativo en Imágenes

Cuando las imágenes no se cargan (que sucede más en modo oscuro debido al comportamiento de bloqueo de imágenes de algunos clientes), el texto alternativo es el único inconveniente. Sin texto alternativo descriptivo, su email se convierte en una página en blanco.

7. No probar antes de enviar

El mayor error de todos. Enviar correos electrónicos de prueba a Gmail (móvil), Apple Mail y Outlook con modo oscuro habilitado. Una prueba de 5 minutos puede evitar que su campaña busque una gran parte de su público.

Técnicas CSS para el Modo Oscuro (y sus limitaciones)

Si usted está codificando correos electrónicos HTML, hay técnicas CSS que puede utilizar, pero sólo funcionan en algunos clientes:

Declaración de Meta Tag

Añadiendo <meta name="color-scheme" content="light dark"> a su correo electrónico <head> le dice a los clientes que su email está diseñado para ambos modos. Apple Mail respeta esto. Gmail lo ignora.

La consulta de medios de color prefiere

Puede escribir reglas CSS que sólo se aplican cuando el modo oscuro está activo: @media (prefers-color-scheme: dark). Esto le permite especificar colores alternativos, cambiar imágenes, y ajustar los diseños para modo oscuro. La captura: solo Apple Mail y algunas versiones de macOS Outlook lo soportan de forma fiable. Gmail y Yahoo lo ignoran completamente.

Enfoque Propietario de Outlook

Outlook escritorio utiliza su propio sistema de modo oscuro con [data-ogsc] selectores de atributos. Puede apuntar el modo oscuro de Outlook específicamente, pero requiere reglas CSS separadas del estándar prefiere-color-scheme enfoque. Esto significa mantener dos conjuntos de modo oscuro anula.

La verdad honesta: El control del modo oscuro basado en CSS es fragmentado e irreliable. Usted está escribiendo código personalizado para 3-4 diferentes motores de renderizado, y Gmail — el mayor cliente de correo electrónico — ignora todo.

La solución basada en la imagen

Esto es lo que la mayoría de las marcas de comercio electrónico han descubierto: correos electrónicos basados en imágenes son completamente inmunes al modo oscuro.

Cuando su contenido de correo electrónico se renderiza como imágenes (diseñadas en Figma y rebanadas en secciones), el modo oscuro literalmente no puede alterar su diseño. Los clientes de correo electrónico sólo pueden invertir elementos HTML — texto, antecedentes, fronteras. No pueden cambiar los píxeles dentro de una imagen.

Esto significa:

• Tus colores permanecen exactamente como están diseñados
• Tu tipografía renderiza con las fuentes exactas que elegiste
• Su diseño no cambia ni rompe
• Sus logos permanecen visibles en el fondo correcto
• CSS anulaciones necesarias para cualquier cliente de correo electrónico

Por eso las marcas como Nike, Zara y ASOS utilizan emails basados en imágenes para sus campañas de marketing. La consistencia visual vale la pena cambiar. Si quieres aprender más sobre este enfoque, leer nuestra comparación completa de los correos electrónicos basados en imágenes vs HTML.

Lista de verificación práctica: Modo oscuro Proofing Your Emails

Si utiliza correos electrónicos HTML o basados en imágenes, siga esta lista de verificación antes de cada campaña:

• Pruebas en Gmail móvil (Android) — el modo oscuro más agresivo renderizando. Si parece aceptable aquí, se verá bien por todas partes.
• Ver todos los logos - asegurar que sean visibles tanto en fondo claro como en oscuro. Agregue trazos o fondos sólidos si es necesario.
• Evite blanco puro (#FFF) y negro puro (#000) — utilizar ligeramente gris blanco y oscuro en lugar de inversiones menos duras.
• Utilizar letra-peso 400+ para texto corporal — las fuentes delgadas se vuelven ilegibles en el renderizado ligero.
• Añadir texto alternativo descriptivo a cada imagen - la red de seguridad cuando las imágenes no se rinden.
• Prueba de contraste del botón CTA — los botones deben permanecer legibles y pulsables en ambos modos.
• Considere basado en imágenes para campañas visuales — lanzamientos de productos, ventas estacionales y emails de narración de marca benefician más.

Preguntas frecuentes

¿Cómo puedo probar mi correo electrónico en modo oscuro?

Enviar correos electrónicos de prueba a Gmail (app móvil), Apple Mail (con modo oscuro habilitado en la configuración del sistema), y Outlook (desktop y móvil). Para una cobertura más amplia, uso Litmus o Email on Acid — ambos ofrecen vistas de renderización de modo oscuro a través de múltiples clientes.

¿El modo oscuro afecta los correos electrónicos basados en imágenes?

No. El modo oscuro sólo altera los elementos HTML (texto, antecedentes, fronteras). El contenido de la imagen es intacto. Esta es una de las mayores ventajas del enfoque basado en la imagen para las campañas de marketing.

¿Por qué mi logotipo desaparece en modo oscuro?

Su logotipo es probablemente una imagen de color oscuro en un fondo transparente. Cuando el modo oscuro cambia el fondo a la oscuridad, el logotipo se vuelve invisible. Arréglalo agregando un trazo blanco alrededor del logotipo o exportándolo en un fondo de luz sólido.

¿Prefiere el diseño de color en el correo electrónico?

Sólo en Apple Mail y algunas versiones de Outlook. Gmail — el mayor cliente de correo electrónico— lo ignora completamente. No confíe en las consultas de medios CSS para el modo oscuro en el correo electrónico. Diseño defensivo en su lugar.

¿Debo diseñar una versión separada del modo oscuro?

Para correos electrónicos codificados por HTML, vale la pena probar que su versión individual parece aceptable en modo oscuro y haciendo ajustes específicos. Para correos electrónicos basados en imágenes, no se necesita versión separada ya que el modo oscuro no puede alterar el contenido de la imagen.