Cómo evitar que iOS 13 Dark Mode rompa los correos electrónicos

10

Tenemos una aplicación de comercio electrónico que envía los detalles del pedido cuando se realiza una compra, y acabamos de rediseñar esa plantilla de correo electrónico. En los últimos días, hemos recibido informes de clientes a los que les falta la mitad del texto en el correo electrónico.

Después de obtener finalmente una captura de pantalla, hemos aprendido que el problema está sucediendo en los iPhones que usan el modo oscuro. Hasta ahora, todos han sido clientes que usan gmail con la aplicación Mail o con Safari (ambos tienen el mismo problema). No estoy seguro de si el factor gmail es relevante o una coincidencia.

Nuestro correo electrónico es simple: tiene un fondo blanco, encabezados grises y texto en cuerpo negro. El modo oscuro deja el fondo blanco y los encabezados grises intactos, pero el texto del cuerpo se cambia de negro a blanco. En el fondo blanco, el texto blanco es obviamente invisible, y parece que al correo electrónico le faltan grandes cantidades de contenido.

¿Hay algo que se pueda hacer para evitar que el modo oscuro cambie nuestro texto de negro a blanco?

Debo señalar que también tenemos un código QR incrustado en el correo electrónico, por lo que me preocupan las soluciones que permitirían que el modo oscuro continúe recoloreando nuestro correo electrónico completo, ya que creo que dificultaría el reconocimiento del código QR. .

Editar: esto no está relacionado con ningún código de aplicación, por lo que no se aplican las pautas para desarrollar iOS para el modo oscuro. Esto es simplemente una cuestión de cómo la aplicación Mail de Apple en iOS 13 en modo oscuro muestra un correo electrónico HTML.

ios css email gmail ios-darkmode jessica
fuente
Posible duplicado de iOS13 Problema de color blanco con texto Color de UIKit
Pratik Sodha
¿Qué sucede si establece el color de la fuente explícitamente? Supongo que el modo oscuro solo cambia la fuente a blanco si se deja con el color predeterminado.
Frank Schlegel
2
Relacionado: webkit.org/blog/8840/dark-mode-support-in-webkit
Frank Schlegel
@PratikSodha esa pregunta se relaciona con las aplicaciones de iOS, simplemente estoy hablando de un correo electrónico HTML que se muestra en la aplicación Mail de Apple en modo oscuro.
Jessica
@FrankSchlegel, el color y el color de fondo se establecieron explícitamente en todas partes, y todavía se estaban modificando. El enlace que proporcionó tenía la respuesta, tuve que configurar color-scheme: light onlytodos los elementos. Muchas gracias.
Jessica

Respuestas:

10

Puede eliminar esto por la fuerza en dispositivos Apple, pero ahora tenemos Gmail y Outlook en Mac sin una forma de detenerlos.

Simplemente ponga esto en <head>:

<meta name="color-scheme" content="only">

"Solo" es la abreviatura de "Solo luz" (que también funciona)

Eso corregirá para el modo oscuro de iPhone y Apple Mail, pero no para Outlook en Mac o Gmail.

Actualmente puede anular Outlook en Mac, pero no hay ningún hack conocido para Gmail.

Aquí se explica cómo anular Outlook en Mac:

<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>

HT a Brian Thies en el foro de Litmus para esto

Pero es mejor intentar solucionar el problema raíz, en lugar de eliminar una funcionalidad (modo oscuro) que desean sus clientes.

Apple ha proporcionado tal manera, con esto en <head>:

<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>

Además, asegúrese de que su elemento más externo con el color de fondo tenga la clase "darkmode", p. Ej.

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">

Entonces, por defecto, tendrá fondo blanco, texto negro; y en modo oscuro será un fondo oscuro con texto claro.

(Proporcione el código para cualquier consulta adicional).

Nathan
fuente