El modo oscuro se ha convertido en una configuración de visualización ampliamente adoptada en dispositivos y plataformas. Con clientes de correo electrónico como Gmail, Outlook y Apple Mail que admiten el Modo Oscuro, es importante entender cómo impacta el diseño del correo electrónico y cómo optimizar tus campañas en consecuencia.
En este artículo, aprenderás qué es el modo oscuro, cómo previsualizar tus correos electrónicos en modo oscuro y las mejores prácticas para optimizar tus diseños tanto para modos claros como oscuros.
¿Qué es el modo oscuro?
El modo oscuro es una configuración de visualización que utiliza un fondo oscuro con texto claro, diseñado para reducir la fatiga visual en entornos con poca luz. Desde su introducción, el modo oscuro ha ganado popularidad en plataformas principales (iOS, Gmail, Outlook) por razones como:
Reducción de la fatiga visual en condiciones de poca luz.
Conservación de batería en pantallas OLED.
Mejora de la legibilidad del contenido en todos los dispositivos.
Preferencia estética por un aspecto elegante y moderno.
⚠️ Importante: No puedes evitar que tus correos electrónicos se muestren en modo oscuro ni desactivar la inversión automática de colores. El modo oscuro es controlado por el cliente de correo electrónico y la configuración del dispositivo de tus suscriptores (Gmail, Apple Mail, Outlook, etc.), no por el remitente. En lugar de prevenir el modo oscuro, concéntrate en diseñar correos electrónicos que se vean geniales tanto en modos claros como oscuros.
Cómo acceder a la vista previa del modo oscuro en Omnisend
Para acceder a la vista previa del modo oscuro en Omnisend:
Abre tu correo electrónico en el Editor de correos electrónicos.
Haz clic en Vista previa en la esquina superior derecha.
Una vez en modo de vista previa, activa el interruptor para Vista previa en modo oscuro.
Puedes previsualizar tu correo electrónico utilizando dos tipos de inversión de color: Completa y Parcial. Las secciones a continuación explican lo que significa cada tipo y cómo los clientes de correo electrónico manejan el modo oscuro.
Tipos de inversión de color
Los clientes de correo electrónico aplican el Modo Oscuro de diferentes maneras, afectando cómo se muestran los colores. Entender estas variaciones puede ayudar a crear diseños que se vean bien tanto en modos Oscuro como Claro.
1. Inversión total
Revierte todos los colores (de claro a oscuro y viceversa). Generalmente aplicado por:
Outlook Desktop (Windows): Inversión total, haciendo que todo el fondo sea oscuro y el texto claro.
Gmail Web: Puede aplicar inversión completa, especialmente si el correo electrónico no está específicamente optimizado para el modo oscuro.
Yahoo Mail: Similar a Gmail, Yahoo Mail a menudo utiliza inversión total, invirtiendo tanto los colores del texto como del fondo para un mejor contraste.
2. Inversión parcial
Ajusta solo elementos específicos, como el texto, mientras deja imágenes y algunos colores de marca intactos. Este enfoque es común en:
Apple Mail (iOS y macOS): Aplica inversión parcial, donde el texto cambia a colores más claros, pero los colores de fondo y las imágenes generalmente permanecen iguales a menos que sean extremadamente brillantes.
Outlook Móvil: Utiliza típicamente inversión parcial, modificando el texto y ciertos colores de fondo mientras preserva las imágenes.
Gmail Mobile (Android & iOS): Utiliza inversión parcial, a menudo dejando imágenes y colores de fondo intactos mientras ajusta el color del texto para mejorar la legibilidad en modo oscuro.
Muestra de inversión de color en modo oscuro. Crédito de la imagen: https://www.listrak.com/
Para maximizar la legibilidad y la consistencia de la marca, diseña correos electrónicos teniendo en cuenta los modos de inversión parcial y total.
Por qué los correos electrónicos se ven diferentes en móvil vs. escritorio: El mismo cliente de correo electrónico (por ejemplo, Gmail) puede aplicar diferentes tipos de inversión dependiendo del dispositivo. Gmail iOS utiliza inversión completa, mientras que Gmail Android utiliza inversión parcial. Esto es controlado por la lógica del modo oscuro del cliente de correo electrónico, no por Omnisend. Siempre previsualiza tu correo electrónico en modos oscuros tanto Completo como Parcial, y envía correos electrónicos de prueba a ti mismo en móvil y escritorio antes de enviarlo a tu audiencia.
Compatibilidad con el Modo Oscuro en Clientes de Correo Electrónico Populares
La tabla a continuación muestra cómo diferentes clientes de correo electrónico manejan el modo oscuro a partir de octubre de 2023. Usa esto como referencia al diseñar tus correos electrónicos.
Cliente de Correo Electrónico | Tratamiento HTML en Modo Oscuro | Soporta | [data‐ogsc] soporte | Particularidades notables | |
Apple Mail (MacOS) | Sin cambio* | ✔ Sí | ✘ No | ✔ Sí | Los fondos blancos puros (#ffffff) se invertirán si está presente |
iPhone / iPad (iOS 16) | Sin cambios* | ✔ Sí | ✘ No | ✔ Sí | Los fondos blancos puros (#ffffff) se invertirán si está presente |
Inversión parcial | ✘ No | Parcial* | ✘ No | Los colores de fondo más claros se oscurecerán. | |
Outlook 2021 (WinOS) | Inversión total* | ✘ No | ✘ No | ✘ No | El targeting especial es posible para secciones VML. |
Aplicación Outlook (iOS) | Inversión parcial | ✘ No | Parcial* | ✘ No | Los colores de fondo más claros se oscurecerán, y las fuentes claras sobre un fondo oscuro pueden oscurecerse. |
Aplicación Outlook (Android) | Inversión parcial | ✘ No | Parcial* | ✘ No | Los colores de fondo más claros se oscurecerán, y las fuentes claras sobre un fondo oscuro pueden oscurecerse. |
Aplicación Gmail (iOS) | Inversión total* | ✘ No | ✘ No | ✓ Sí | El targeting especial es posible para algunos colores y colores de fuente |
Aplicación de Gmail (Android) | Inversión parcial | ✘ No | ✘ No | ✓ Sí | |
Office 365 (Win) | Inversión total | ✘ No | ✘ No | ✘ No | |
Office 365 (Mac) | Inversión parcial | Parcial* | ✘ No | ✓ Sí | Los colores de fondo más claros se oscurecerán |
Correo de Windows | Inversión total | ✘ No | ✘ No | ✘ No |
Nota: Forzar el color de fondo para que se mantenga consistente no impacta el color de la fuente, que seguirá invirtiéndose. Las únicas excepciones a esto son los clientes que soportan completamente @media o [data-ogsc] y la aplicación Gmail, donde el arreglo de mezcla de colores es efectivo.
Uso de colores de fondo forzados (Avanzado)
Algunos clientes de correo electrónico (Apple Mail, aplicaciones de Gmail, Office 365 Mac) te permiten forzar colores de fondo utilizando CSS personalizado en el elemento HTML. Sin embargo, esta técnica no funciona en Outlook Desktop, Correo de Windows o Office 365 (Win), que aplican inversión total sin importar nada. Incluso donde se admite, los colores del texto seguirán invirtiéndose automáticamente.
Para agregar CSS personalizado en Omnisend:
Abre tu correo electrónico en el Editor de correos electrónicos.
Ve a Agregar elementos en la izquierda.
Arrastra el HTML elemento a tu correo electrónico.
El editor HTML aparecerá a la derecha.
Pega tu código CSS del modo oscuro allí.
⚠️ Nota: Los colores de fondo forzados no son una solución universal y requieren conocimientos avanzados de CSS. Algunos clientes de correo electrónico pueden ignorar completamente el CSS personalizado. Siempre prueba en bandejas de entrada reales.
Mejores prácticas para diseñar correos electrónicos para el modo oscuro
Para mejorar la experiencia del modo oscuro para tus suscriptores, sigue estos consejos de diseño y codificación esenciales.
Optimiza logotipos e imágenes para el modo oscuro
Logotipos blancos sobre fondos blancos: Si tu logotipo es blanco o muy claro, desaparecerá cuando se coloque sobre un fondo blanco en modo oscuro (que se invierte a negro). Agrega un fondo de color o transparente detrás de tu logotipo, o incluye un contorno claro para asegurar visibilidad en ambos modos. Omnisend no soporta el intercambio automático de logotipos entre modos claro y oscuro; necesitas editar tu archivo de logotipo directamente.
Imágenes transparentes: Para imágenes con texto oscuro sobre un fondo transparente, agrega un contorno claro y translúcido para asegurar que el texto siga siendo legible si los colores se invierten. Esto es particularmente útil para Gmail y Outlook, que a menudo aplican inversión parcial o total de color en el modo oscuro.
Muestra del logotipo en modo oscuro. Crédito de la imagen: https://www.litmus.com/
Branding en modo oscuro: Usa elementos sutiles y claros que son invisibles en el modo claro, pero que añaden un toque único y de marca en el modo oscuro.
Imágenes No Transparentes: Agrega relleno alrededor de elementos clave en imágenes no transparentes para evitar problemas de alineación cuando los colores cambian en el Modo Oscuro. Ten en cuenta que las imágenes con fondos muy brillantes (blanco, amarillo, etc.) pueden seguir teniendo sus colores invertidos por clientes de correo electrónico como Gmail, iOS y Outlook móvil, incluso si no son transparentes. Esto es controlado por el cliente de correo electrónico, no por Omnisend.
Usa texto negro sobre un fondo blanco para el contenido textual
Mantener el contenido textual como negro sobre un fondo blanco es una forma simple pero efectiva de mantener la legibilidad en ambos modos, claro y oscuro. Esto minimiza cambios de color no deseados y te permite enfocarte en elementos de diseño creativos fuera del área de texto principal.
Agrega Estilos Base para el Modo Oscuro en Tus Plantillas de Correo Electrónico
Al incluir estilos específicos de modo oscuro en tus plantillas, puedes asegurarte de que todos tus correos electrónicos se muestren correctamente, incluso si olvidas ajustar los estilos para el modo oscuro.
Aquí tienes un ejemplo rápido de estilos base CSS:
.darkbg { background-color: black !important; } .h1, .h2 { color: white !important; } .button { background-color: white !important; color: black !important; }Consejo rápido: Usar clases como .darkbg para fondos y .button para botones CTA permite actualizaciones rápidas en múltiples correos electrónicos, asegurando consistencia en el modo oscuro.
Para agregar este CSS en Omnisend: Ve a Agregar elementos → arrastra el HTML elemento en tu correo electrónico → pega el código en el editor que aparece a la derecha.
Siempre prueba/previsualiza correos electrónicos en Omnisend
Usa la función de vista previa (interruptor de modo oscuro activado) en Omnisend para previsualizar tus correos electrónicos para clientes populares, como Gmail, Outlook y Apple Mail, y diferentes sistemas operativos. Verifica la legibilidad, los colores de la marca y la correcta visualización de logotipos e imágenes.
💡 Consejo: La vista previa del modo oscuro muestra cómo es probable que se renderice tu correo electrónico, pero el renderizado del cliente de correo electrónico puede variar. Siempre envía un correo electrónico de prueba a ti mismo y visualízalo en bandejas de entrada reales (Gmail, Outlook, Apple Mail en móvil y escritorio) para confirmar la apariencia final antes de enviarlo a tu audiencia.
Mantén los elementos de diseño simples y consistentes
Fondos simples (negro para el Modo Oscuro y blanco para el Modo Claro) mejoran la legibilidad y reducen el riesgo de desajustes de diseño entre clientes de correo electrónico. Incorpora contrastes sutiles o sombras para mayor profundidad sin comprometer la funcionalidad del Modo Oscuro.
Problemas Comunes y Soluciones
Mis colores personalizados aún se ven mal después de diseñar para ambos modos
Algunos clientes de correo electrónico (como Gmail iOS y Outlook Desktop) aplican inversión completa de color que anula tu diseño personalizado, incluso si has diseñado para ambos modos. Esta es una limitación del cliente de correo electrónico, no un problema de Omnisend.
Solución Alternativa: Crea bloques de correo electrónico separados para móvil y escritorio utilizando configuraciones de visibilidad, y diseña los bloques móviles con tonos más oscuros que se inviertan menos agresivamente en el modo oscuro. Siempre previsualiza en ambos modos oscuros, Completo y Parcial, y envía correos electrónicos de prueba a ti mismo en móvil y escritorio para ver el renderizado final.
Mi correo electrónico se ve diferente en móvil vs. escritorio
El mismo cliente de correo electrónico puede aplicar diferentes tipos de inversión de modo oscuro dependiendo del dispositivo. Por ejemplo, Gmail iOS utiliza inversión de color completa (invirtiendo todos los colores), mientras que Gmail Android utiliza inversión parcial (ajustando el texto y algunos fondos). Esto es controlado por la lógica del modo oscuro del cliente de correo electrónico, no por Omnisend.
Solución: Previsualiza tu correo electrónico en modos oscuros tanto Completo como Parcial en Omnisend, y envía correos electrónicos de prueba a ti mismo en móvil y escritorio antes de enviarlo a tu audiencia.
La vista previa no coincide con lo que veo en mi bandeja de entrada
La vista previa del modo oscuro te da una aproximación cercana de cómo se renderizará tu correo electrónico en modos de inversión Completa y Parcial, pero el renderizado del cliente de correo electrónico puede variar ligeramente.
Solución: Siempre envía un correo electrónico de prueba a ti mismo y visualízalo en bandejas de entrada reales (Gmail, Outlook, Apple Mail en móvil y escritorio) para confirmar la apariencia final antes de enviarlo a tu audiencia.
Preguntas Frecuentes
¿Puedo evitar que mis correos electrónicos se muestren en modo oscuro?
No, no puedes evitar que los correos electrónicos se muestren en modo oscuro o forzar un fondo blanco en todos los clientes de correo electrónico. El modo oscuro es controlado por el cliente de correo electrónico y la configuración del dispositivo de cada suscriptor (Gmail, Apple Mail, Outlook, etc.), no por el remitente. Algunos clientes de correo electrónico aplican inversión completa de color (cambiando fondos blancos a negros), mientras que otros aplican inversión parcial. En lugar de intentar evitar el modo oscuro, diseña tus correos electrónicos para que se vean bien tanto en modos claro como oscuro utilizando nuestra función de vista previa del modo oscuro.
¿Cómo puedo forzar que mis colores de fondo se mantengan iguales en modo oscuro?
Omnisend no tiene una función incorporada para forzar colores de fondo. Puedes agregar CSS personalizado utilizando el elemento HTML en el editor de correos electrónicos para aplicar colores de fondo forzados para algunos clientes de correo electrónico (Apple Mail, aplicaciones de Gmail). Sin embargo, esta técnica no funciona en Outlook Desktop, Windows Mail o Office 365 (Win), que aplican inversión de color completa sin importar qué. Incluso donde se admite, los colores del texto seguirán invirtiéndose automáticamente. Para añadir CSS personalizado: Ve a Agregar Elementos → arrastra el HTML elemento a tu correo electrónico → pega tu código CSS en el editor que aparece a la derecha.
¿Por qué desaparece mi logo blanco en modo oscuro?
Si tu logo es blanco o muy claro y está colocado sobre un fondo blanco, desaparecerá en modo oscuro porque el fondo se invierte a negro, pero el logo permanece blanco (o se oscurece). Para solucionar esto, agrega un fondo de color o transparente detrás de tu logo, o aplica un contorno claro para asegurarte de que siga siendo visible en ambos modos. Siempre previsualiza tu correo electrónico en modo oscuro antes de enviar.
¿Dónde agrego el código CSS del modo oscuro en Omnisend?
Para agregar CSS personalizado en Omnisend: Abre tu correo electrónico en el Editor de correos electrónicos, ve a Agregar elementos a la izquierda, arrastra el elemento HTML a tu correo electrónico, y el editor HTML aparecerá a la derecha. Pega tu código CSS del modo oscuro allí. Ten en cuenta que algunos clientes de correo electrónico pueden ignorar completamente el CSS personalizado – siempre prueba tu correo electrónico en bandejas de entrada reales.
¿Por qué mis correos electrónicos se ven diferentes en móvil en comparación con el escritorio en modo oscuro?
El mismo cliente de correo electrónico puede aplicar diferentes tipos de inversión de modo oscuro dependiendo del dispositivo. Por ejemplo, Gmail iOS utiliza inversión de color completa (invirtiendo todos los colores), mientras que Gmail Android utiliza inversión parcial (ajustando el texto y algunos fondos). Esto es controlado por la lógica del modo oscuro del cliente de correo electrónico, no por Omnisend. Para asegurarte de que tu correo electrónico se vea bien en todos los dispositivos, prévisualízalo en modos oscuros tanto Completo como Parcial en Omnisend, y envía correos electrónicos de prueba a ti mismo en móvil y escritorio antes de enviarlo a tu audiencia.
¿Qué pasa si mis colores personalizados aún se ven mal después de seguir esta guía?
Algunos clientes de correo electrónico (como Gmail iOS y Outlook Desktop) aplican inversión completa de color que anula tu diseño personalizado, incluso si has diseñado para ambos modos. Esta es una limitación del cliente de correo electrónico, no un problema de Omnisend.
Solución Alternativa: Crea bloques de correo electrónico separados para móvil y escritorio utilizando configuraciones de visibilidad, y diseña los bloques móviles con tonos más oscuros que se inviertan menos agresivamente en el modo oscuro. Siempre previsualiza en ambos modos oscuros, Completo y Parcial, y envía correos electrónicos de prueba a ti mismo en móvil y escritorio para ver el renderizado final.
¿La vista previa del modo oscuro muestra exactamente cómo se verá mi correo electrónico en las bandejas de entrada?
La vista previa del modo oscuro te da una aproximación cercana de cómo se renderizará tu correo electrónico en modos de inversión Completa y Parcial, pero el renderizado del cliente de correo electrónico puede variar ligeramente. Siempre envía un correo electrónico de prueba a ti mismo y visualízalo en bandejas de entrada reales (Gmail, Outlook, Apple Mail en móvil y escritorio) para confirmar la apariencia final antes de enviarlo a tu audiencia.
¿Por qué mis fondos de imagen cambian de color en modo oscuro?
Los clientes de correo electrónico como Gmail y Outlook en móvil aplican inversión de color a imágenes con fondos muy brillantes (blanco, amarillo, etc.), incluso si la imagen no es transparente. Esto es controlado por el cliente de correo electrónico, no por Omnisend. Para reducir esto, utiliza imágenes con fondos que no sean blanco puro o agrega relleno/bordes alrededor de elementos clave.
¿Puedo establecer colores de modo oscuro en Activos de Marca?
No. Los Activos de Marca (colores de Acento, Oscuro, Claro) se aplican a las plantillas de correo electrónico pero no controlan el renderizado del modo oscuro entre los clientes de correo electrónico. Para optimizar para el modo oscuro, utiliza las mejores prácticas de diseño o agrega HTML personalizado con CSS de modo oscuro.
¿No puedes encontrar lo que buscas? Nuestro equipo de soporte 24/7 está aquí para ti. Envíanos un mensaje en la aplicación o por correo electrónico. [email protected].