Optimizar HTML email para dark mode en Outlook, Gmail y Apple Mail
Cómo preparar plantillas HTML para dark mode en Outlook, Gmail y Apple Mail: meta color-scheme, prefers-color-scheme, logos invertidos y contraste mínimo.
El dark mode dejó de ser una rareza estética para convertirse en el modo por defecto de muchos usuarios en Apple Mail iOS, Outlook Windows y Gmail Android. La diferencia es que cada cliente lo aplica de forma distinta: unos respetan lo que tú declaras, otros invierten colores a su criterio y otros mezclan reglas. Si la plantilla no está pensada para los dos modos, terminas con logos invertidos, texto blanco sobre blanco o contrastes ilegibles que arrastran tu reputación.
Cómo trata cada cliente el dark mode
No hay un comportamiento único. Conviene clasificar por familias para entender qué hacks aplican.
Apple Mail (macOS, iOS, iPadOS)
Es el cliente que mejor respeta el estándar. Si declaras meta name="color-scheme" y usas @media (prefers-color-scheme: dark), Apple Mail aplica tus reglas tal cual. No invierte colores por su cuenta cuando reconoce que la plantilla está preparada. Es el cliente de referencia para validar tu trabajo.
Gmail (web, Android, iOS)
Gmail aplica una estrategia mixta. En la web suele dejar el HTML como está, pero en Android invierte algunos fondos claros, sobre todo si el contraste con texto oscuro es bajo. En iOS depende de la versión. Gmail no soporta prefers-color-scheme de forma fiable, así que no puedes confiar en ese media query como única defensa.
Outlook 365 (web y desktop), Outlook.com
Outlook es la principal fuente de problemas. Las versiones modernas aplican una “Partial Color Inversion” que oscurece fondos claros pero deja imágenes y algunos colores intactos. Las versiones más antiguas ignoran tu CSS por completo. Para estos clientes existen los selectores específicos [data-ogsc] (texto) y [data-ogsb] (fondo) que sí se respetan.
Yahoo Mail, AOL
Comportamiento similar a Gmail web: dark mode visual de la app sin tocar el HTML. Suele renderizar bien si el HTML ya contempla los dos modos.
Declarar soporte explícito
Lo primero es decirle al cliente que tu plantilla ya está pensada para los dos modos. Sin esta declaración, algunos invierten colores agresivamente porque asumen que el correo es solo “light”.
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
</head>meta name="color-scheme" es el oficial. supported-color-schemes es la variante que Apple Mail prioriza. Incluir ambos cubre el máximo de clientes.
Definir paletas con prefers-color-scheme
La técnica más robusta es declarar variables CSS para los dos modos y referenciarlas en el HTML.
<style>
:root {
--bg: #ffffff;
--text: #111111;
--muted: #555555;
--accent: #0a66c2;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111111;
--text: #f5f5f5;
--muted: #b3b3b3;
--accent: #4a9bf0;
}
}
body { background: var(--bg); color: var(--text); }
.muted { color: var(--muted); }
a { color: var(--accent); }
</style>Apple Mail y algunos webmails aplican el bloque @media. Gmail y Outlook lo ignorarán parcialmente, pero los valores por defecto seguirán siendo legibles. Para esos clientes hay que sumar otros recursos.
Hacks específicos de Outlook
Las versiones modernas de Outlook (Outlook 2019 y 365 en Windows, y Outlook.com en algunos navegadores) soportan dos atributos no estándar: data-ogsc (Office Graph Style Color) y data-ogsb (background). Cuando Outlook entra en dark mode, antepone [data-ogsc] y [data-ogsb] a los elementos transformados, así que puedes definir reglas específicas:
<style>
[data-ogsc] .dark-text { color: #f5f5f5 !important; }
[data-ogsb] .dark-bg { background-color: #111111 !important; }
</style>Este truco no funciona en todas las versiones, pero cubre buena parte del parque actual de Outlook empresarial. Si aplicas !important, ten cuidado con la cascada del resto del email.
Imágenes y logos: el punto débil
El problema más visible del dark mode es ver un logo “atrapado” en un rectángulo blanco. Pasa cuando el logo es un PNG opaco con fondo blanco renderizado sobre un fondo oscuro. Hay tres soluciones combinables.
Transparencia con trazo dual
El logo se exporta en PNG24 con canal alfa y se diseña para que sus trazos funcionen sobre fondos claros y oscuros. Si tu logo es negro puro, considera añadir un borde sutil o un sombreado que aporte legibilidad sobre negro.
Dos versiones según prefers-color-scheme
Sirve dos archivos y muestra el adecuado:
<picture>
<source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
<img src="logo-light.png" alt="Marca">
</picture>Apple Mail aplica esta lógica. Otros clientes mostrarán siempre el img por defecto, así que esa versión debe funcionar también en dark mode aceptablemente.
SVG inline
Para iconos vectoriales, un SVG inline con currentColor se adapta automáticamente al color del texto, que ya está definido por las variables CSS. Esto evita tener que servir dos archivos.
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="..." />
</svg>No todos los clientes renderizan SVG inline, pero sí lo hacen Apple Mail y la mayoría de webmails modernos.
Contraste y legibilidad en ambos modos
Un error típico es validar el contraste solo en modo claro. En dark mode, los grises medios suelen quedar por debajo del 4.5:1 que pide WCAG. Algunos consejos prácticos:
- Texto principal: usa
#f5f5f5o más claro sobre fondos#111111o más oscuros, no#ccccccsobre#222222. - Texto secundario o “muted”: no bajes de
#b3b3b3sobre fondo oscuro. - Enlaces: ajusta el azul a una versión más clara en dark mode (algo como
#4a9bf0) para que contraste mejor. - Botones: si el botón tiene fondo de color saturado, comprueba el contraste tanto del texto del botón como de los bordes que pueda quedar sobre fondo claro u oscuro.
Esto se cruza con la accesibilidad general de la plantilla, que afecta a engagement y a percepción de marca. Volveremos en la guía de plantillas accesibles.
Botones y CTA
Los botones suelen ser el elemento que peor envejece en dark mode. Tres patrones funcionan razonablemente bien.
Botón con fondo sólido y borde
Si el fondo del botón es un color saturado (azul, rojo, verde), no necesita adaptarse: solo asegúrate de que el texto sigue siendo legible y de que el borde, si lo hay, contrasta tanto con el fondo claro como con el oscuro del email.
Botón “ghost” con borde
El botón con fondo transparente y borde pierde mucho en dark mode si el borde estaba pensado para fondo claro. Aquí toca usar variables o duplicar la regla con prefers-color-scheme.
Botón con imagen
Mejor evitarlo. Una imagen como botón se ve mal en dark mode salvo que se sirva en versión adaptada. Y los lectores de pantalla la leerán como imagen, no como botón.
Texto sobre imágenes y bloques de cabecera
Las cabeceras decorativas con texto sobreimpresionado son una de las zonas que peor se comportan. Si el texto está incrustado en la imagen, no puedes adaptarlo. Si el texto está en HTML sobre una imagen de fondo, en dark mode puedes acabar con texto blanco sobre imagen clara o al revés.
La solución más segura es construir las cabeceras con HTML puro: fondo de color, texto en HTML, e imágenes solo decorativas. Así puedes controlar los dos modos con CSS.
Validación práctica
No hay un substituto para probar en clientes reales. Como mínimo, revisa:
- Apple Mail iOS y macOS, modo oscuro activado.
- Gmail Android, modo oscuro de la app.
- Gmail iOS, modo oscuro.
- Gmail web (cuenta personal y Workspace).
- Outlook desktop Windows con tema oscuro.
- Outlook.com en Edge y Chrome con tema oscuro.
Servicios como Litmus o Email on Acid muestran capturas con dark mode aplicado, pero conviene complementar con cuentas reales porque algunos clientes mezclan reglas según el dispositivo.
Errores frecuentes
Asumir que prefers-color-scheme cubre todo
Solo Apple Mail y algunos webmails responden. Outlook y Gmail necesitan trabajo adicional.
Usar !important en exceso
Para forzar colores en Outlook puede ser necesario, pero abusar de !important en estilos generales rompe luego los hacks específicos. Reserva !important para los casos donde es la única salida.
No probar bajo conexión móvil
Algunos clientes cargan la versión “tracking pixels off” cuando la conexión es lenta y eso puede afectar al render. Probar con datos móviles ayuda a detectar problemas.
Olvidar el modo claro
Algunos diseñadores se obsesionan con el dark mode y dejan el modo claro feo o con contrastes pobres. Hay que invertir tiempo similar en los dos.
Imágenes ocupando todo el ancho
Si toda la cabecera es una imagen y esa imagen tiene fondo blanco, no hay nada que la salve en dark mode. Reconstruye con HTML.
Cómo encajarlo en el flujo de producción
El dark mode se trata como un requisito de diseño, no como una optimización tardía. Algunas buenas prácticas para equipos de marketing y desarrollo:
- Definir variables de paleta para light y dark al inicio del proyecto.
- Tener una checklist de revisión específica para dark mode.
- Incluir cuentas de prueba en los principales clientes en cada release.
- Revisar el comportamiento tras cambios en el ESP, ya que algunos reescriben CSS.
Cuando el envío es masivo, una caída de engagement por dark mode mal resuelto se traduce en señales negativas para engagement Gmail/Yahoo y, a la larga, en peor inbox placement.
Cuándo merece la pena el esfuerzo
No todas las plantillas necesitan el mismo nivel de cuidado. Para un email transaccional sobrio, con poco color y mayoría de texto, el dark mode “automático” de los clientes funciona razonablemente bien. Para newsletters con identidad visual fuerte, lo razonable es invertir en una segunda paleta y revisarla en cada envío. Si tu audiencia está en clientes Apple, el retorno del esfuerzo es mayor: son los que mejor respetan tus reglas y los que más usuarios tienen el dark mode permanente activado.
Recursos relacionados
Si quieres profundizar, prueba estas herramientas gratuitas: Domain Health, mail tester, validador SPF y validador DMARC.
¿Necesitas que alguien lleve tu canal de email entero? Abalola Mail es la agencia de retención y email marketing de Abalola para ecommerce: estrategia, producción y operación del stack sobre Klaviyo, Mailchimp o Brevo.