{title}
Diseña correos que respeten las preferencias del usuario y se vean geniales en entornos oscuros.
El modo oscuro se ha convertido en el predeterminado para muchos usuarios. Apple Mail, Gmail, Outlook y la mayoría de los clientes móviles ahora admiten el modo oscuro. Pero cada uno lo maneja de manera diferente, creando un desafío de diseño complejo.
Esta guía explica cómo los clientes de correo aplican el modo oscuro, técnicas para controlar la experiencia y estrategias de prueba para asegurar que tus correos se vean bien tanto en entornos claros como oscuros.
Cómo los Clientes de Correo Manejan el Modo Oscuro
Los clientes de correo utilizan diferentes enfoques para el modo oscuro:
1. Sin Cambios (Control del Usuario)
Algunos clientes (Gmail web antiguo, algunas versiones de Outlook) no modifican los colores del correo. Tu diseño aparece como se pretendía independientemente del tema del cliente.
2. Inversión Parcial de Color
Clientes como Apple Mail y iOS Mail invierten los colores de manera inteligente. Los fondos claros se vuelven oscuros. El texto oscuro se vuelve claro. El cliente intenta mantener la legibilidad.
3. Inversión Total de Color
Algunos clientes invierten todos los colores de manera agresiva. Esto puede causar problemas con imágenes, logotipos y combinaciones de colores cuidadosamente diseñadas.
4. Soporte de Media Queries CSS
El mejor escenario: clientes que admiten media queries de prefers-color-scheme. Puedes proporcionar estilos explícitos para el modo oscuro.
El Enfoque de Media Query
Donde se admita, prefers-color-scheme te permite definir estilos para el modo oscuro:
<style>
@media (prefers-color-scheme: dark) {
.body-bg {
background-color: #1a1a1a !important;
}
.text-primary {
color: #ffffff !important;
}
.text-secondary {
color: #b3b3b3 !important;
}
.card {
background-color: #2d2d2d !important;
}
}
</style>Soporte a partir de 2026:
- Apple Mail (macOS/iOS): Soporte completo
- Outlook (macOS): Soporte completo
- Gmail App (iOS): Soporte parcial
- Outlook App: Soporte limitado
- Gmail (web): Sin soporte (usa su propio algoritmo)
Meta Tag de Esquema de Color
Indica a los clientes que tu correo admite el modo oscuro:
<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>Esto indica a los clientes que has proporcionado estilos para el modo oscuro. Algunos clientes usan esto para decidir si aplican sus propios cambios de color.
Diseñando para la Inversión Automática
Dado que no puedes controlar todos los clientes, diseña teniendo en cuenta la inversión automática:
Evita el Blanco Puro (#ffffff)
Los fondos blancos puros pueden invertirse a negro puro, lo que puede ser duro. Usa un blanco ligeramente roto (#f5f5f5) para los fondos principales.
Evita Texto Negro Puro (#000000)
El texto negro puro puede invertirse a blanco puro. Usa gris oscuro (#333333) en su lugar. Se invierte a un gris claro más suave.
Usa Logotipos PNG Transparentes
Los logotipos con fondos transparentes se adaptan mejor. Si tu logotipo es oscuro, considera proporcionar una versión clara para el modo oscuro:
<style>
@media (prefers-color-scheme: dark) {
.logo-light {
display: none !important;
}
.logo-dark {
display: block !important;
}
}
</style>
<img class="logo-light" src="logo-dark.png" alt="Logotipo">
<img class="logo-dark" src="logo-light.png" alt="Logotipo" style="display: none;">Añade Relleno/Borde a las Imágenes
Las imágenes con fondos transparentes pueden desaparecer contra fondos oscuros. Añade bordes sutiles o fondos:
<img src="icon.png"
style="background-color: #ffffff; padding: 8px; border-radius: 4px;"
alt="Icono">Diseño de Botones para el Modo Oscuro
Los botones deben funcionar en ambos modos:
<!-- Usa colores de rango medio que funcionen en ambos modos -->
<table role="presentation">
<tr>
<td style="background-color: #007bff; border-radius: 4px;">
<a href="..."
style="color: #ffffff; padding: 12px 24px; display: block; text-decoration: none;">
Botón Primario
</a>
</td>
</tr>
</table>Evita fondos de botón muy claros (pueden invertirse a oscuros con texto oscuro). Los colores de marca de rango medio suelen funcionar en ambos modos.
Probando el Modo Oscuro
Pruebas Manuales
Prueba en modo oscuro real:
- Activa el modo oscuro en tu dispositivo
- Envía correos de prueba a múltiples cuentas
- Revisa en Apple Mail, Gmail, Outlook
- Prueba tanto móvil como escritorio
Pruebas Automatizadas
Litmus y Email on Acid incluyen vistas previas del modo oscuro. Ve cómo se renderiza tu correo en diferentes clientes tanto en modo claro como oscuro.
Modo Oscuro en Constructores de Correo
Algunos constructores de correo manejan el modo oscuro automáticamente. Sequenzy y plataformas similares generan correos considerando el modo oscuro. Las plantillas se prueban en ambos modos.
Si estás usando un framework como MJML, necesitarás agregar estilos de modo oscuro manualmente. El framework compila tu marcado pero no agrega consultas de prefers-color-scheme automáticamente.
Estrategia Práctica
Dada la complejidad, aquí hay un enfoque práctico:
- Diseña primero para el modo claro con colores que se inviertan razonablemente
- Evita los extremos (blanco puro, negro puro)
- Agrega media queries para clientes que las admitan
- Usa las meta tags para indicar soporte de modo oscuro
- Prueba en clientes principales y acepta que alguna variación es inevitable
Cuándo Ignorar el Modo Oscuro
No todos los correos necesitan soporte perfecto de modo oscuro. Los correos transaccionales (recibos, restablecimientos de contraseña) importan más que las campañas promocionales. Enfoca el esfuerzo donde tenga más impacto.
Algunos diseños con mucha marca pueden verse mejor forzando el modo claro. Esta es una elección válida si la identidad de tu marca depende de combinaciones de color específicas.
En Resumen
El modo oscuro en el correo es un objetivo en movimiento. El comportamiento del cliente varía y continúa evolucionando. Diseña con flexibilidad en mente, prueba en diferentes clientes y acepta que alguna variación es inevitable.
El enfoque más seguro: usa colores que funcionen razonablemente cuando se inviertan, agrega media queries para un control fino donde se admitan y prueba antes de enviar. Herramientas como Sequenzy con consideraciones de modo oscuro integradas reducen el trabajo manual.