Cómo Crear una Plantilla de Correo Electrónico en Modo Oscuro
Un correo electrónico en modo oscuro es un esquema de color de correo electrónico que reemplaza un color de texto oscuro sobre un fondo claro con un color de texto claro sobre un fondo oscuro.
Muchos usuarios prefieren el modo oscuro porque:
- reduce la fatiga visual, especialmente en condiciones de poca luz;
- es mejor percibido por personas con problemas de visión;
- ahorra energía de la batería de los dispositivos.
En este artículo, veremos cómo configurar un modo oscuro para una plantilla en el editor SendPulse, hablaremos sobre qué clientes de correo electrónico admiten la personalización y exploraremos cómo un usuario percibe un modo oscuro.
Cómo Visualiza un Usuario el Modo Oscuro
Hay dos tipos de esquemas de color de modo oscuro utilizados por los clientes de correo electrónico:
- Cambio de color parcial — el cliente de correo electrónico detecta el correo electrónico con un color de fondo claro y lo transforma en un color oscuro al mismo tiempo que cambia su color de texto oscuro a uno claro. Los fondos que inicialmente eran oscuros y usaban un color de texto claro permanecerán sin cambios. Los clientes de correo electrónico que usan este tipo de combinación de colores admiten una configuración de modo oscuro personalizada.
- Cambio de color completo — el cliente de correo electrónico detecta el correo electrónico con un color de fondo claro y lo transforma en uno oscuro mientras también cambia el color del texto a uno claro; un fondo oscuro con un color de texto claro se transforma en un fondo claro con un color de texto oscuro. Los clientes de correo electrónico que usan este tipo de combinación de colores admiten una configuración de modo oscuro personalizada.
Puedes ver cómo se ven los modos de correo electrónico claro y oscuro en la imagen a continuación.
Cómo Configurar un Modo Oscuro para Tu Plantilla
Ve a "Correo electrónico" > "Plantillas de correo," y haz clic en Agregar plantilla.
Ahora, selecciona "Editor HTML."
Aprende más: ¿Qué es un editor HTML?.
Haz clic en el icono "Código fuente".
Puedes agregar tu código de correo electrónico en la ventana que se abre.
Para notificar a los clientes de correo electrónico que está utilizando un modo oscuro personalizado en un correo electrónico, dentro del la etiqueta <head>, agrega etiquetas meta para admitir el esquema de color:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Agrega el query @media dentro de la etiqueta <style> para establecer un estilo personalizado. Puedes especificar el color de fondo o del texto, el tipo de visualización del elemento y otras configuraciones.
El query @media se usa cuando deseas aplicar diferentes estilos para varios dispositivos según el tipo de pantalla, el entorno u otras características del dispositivo.
El siguiente ejemplo muestra el color de fondo y la configuración del texto del cuerpo para todo el correo electrónico en un modo oscuro:
@media (prefers-color-scheme: dark) {
body {
background-color: #808080;
color: #FFF5EE;
}
}
Duplica la configuración de tu estilo personalizado con el prefijo [data-ogsc] o [data-ogsb] dentro de la etiqueta <style> :
[data-ogsc] body {
background-color: #808080;
color: #FFF5EE;
}Los prefijos [data-ogsc] y [data-ogsb] se utilizan para incluir estilos para diferentes modos en las etiquetas de bloqueo de correo electrónico.
Aprende más: Lista de Atributos CSS y HTML Admitidos.
Luego, en la etiqueta <body>, agrega el marcado de tu correo electrónico.
Guarda la plantilla y utilízala en tus campañas.
Aprende más: Cómo Enviar una Campaña de Correo Electrónico.
Qué Clientes de Correo Electrónico Admiten el Modo Oscuro
Echemos un vistazo a qué clientes de correo electrónico admiten un modo oscuro personalizado usando el query @media y los prefijos [data-ogsc] o [data-ogsb].
| Cliente de correo electrónico | Admite @media | Admite [data-ogsc] y [data-ogsb] |
| IOS | ||
| Apple Mail | + | - |
| Gmail | - | - |
| Outlook | + | - |
| myMail | - | - |
| Android | ||
| Gmail | - | - |
| Outlook | - | + |
| Yandex | - | - |
| Mail.ru | + | - |
| macOS | ||
| Outlook | + | - |
| Apple Mail | + | - |
| Windows | ||
| Outlook | - | - |
| Web-applications | ||
| Outlook.com | + | Parcialmente |
| Gmail | - | - |
| Yandex | - | - |
| Mail.ru | + | - |
Última actualización: 28.07.2023
o