Home » Blog » Agregar estilos de modo oscuro a la consulta @media (prefers-color-scheme: dark)

Agregar estilos de modo oscuro a la consulta @media (prefers-color-scheme: dark)

Las cosas no van tan bien con nuestros clientes postales rusos como con sus “colegas” estadounidenses. Lo primero es lo primero:

  • Habilitar el tema oscuro en Yandex.Mail

  • Poder. En la versión de escritorio, la letra no se adaptará a la interfaz. Y en la aplicación móvil, la letra se adapta al tema oscuro.
  • Los correos almacenados en lista de números móviles de asia mail.ru se configuran en modo oscuro tanto en el escritorio como en la aplicación móvil.

Lamentablemente, estos clientes de correo electrónico no responden a las consultas de los medios, que Litmus recomienda utilizar. Por lo tanto, solo hay una salida: hacer transparente el fondo de las imágenes para que se vean bien sobre un fondo oscuro.

Cuando comiences a trabajar con un tema oscuro, hay algunos detalles importantes que debes tener en cuenta.

1. Optimice logotipos y otras imágenes para todos los estilos.

Para aquellos clientes que no admiten el modo oscuro, agregue contornos semitransparentes a las imágenes PNG. Por ejemplo, para las Ситуация с Яндекс.Почтой и Mail.ru aplicaciones Gmail y Outlook 2019 en Windows. Esto ayudará a evitar problemas de visualización en aplicaciones de correo electrónico que utilizan sustitución de color parcial o total.

Si las imágenes no son transparentes y tienen un fondo blanco, asegúrese de que haya un marco 

 

2. Habilite el modo oscuro en el correo electrónico para aquellos que tienen una interfaz oscura

Al agregar estos metadatos a la etiqueta <head>, habilita el modo oscuro en su correo electrónico para los usuarios con el tema oscuro correos seo habilitado.

<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>
view rawМетаданные для темной темы hosted with ❤ by GitHub
Scroll to Top