Investigando problemas de modo oscuro en el correo de resumen de actividad

UX
1

Esto pretendía ser una publicación corta con algunas imágenes y una solución fácil de aplicar. Se ha salido de control. El correo electrónico HTML es difícil. Para divertirnos, veamos cómo puede salir mal: Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub :slight_smile:

Siéntete libre de hojear esta publicación y mirar las imágenes. Al final de la publicación, más o menos había llegado a la conclusión de que, debido a la popularidad del modo oscuro, podría valer la pena rediseñar el correo electrónico del resumen en lugar de intentar aplicar soluciones improvisadas a su código actual. Eso no depende de mí, y tal vez he estado mirando esto durante demasiado tiempo.

Ha habido algunas preguntas recientes sobre cómo se renderizan los correos electrónicos del resumen en los clientes de correo electrónico que están configurados en modo oscuro. El problema principal es que el color de fondo del encabezado del resumen se invierte en los clientes de correo electrónico que manejan el modo oscuro invirtiendo completamente los colores (aplicación Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) y Correo de Windows). Esto crea un problema de contraste entre el color del encabezado y el logotipo del sitio.

Estos clientes de correo electrónico también tienen problemas con el color del texto en los botones y la sección “Desde tu última visita” del resumen.

Todas las imágenes a continuación son del servicio de pruebas de correo electrónico Litmus:

Desde un sitio de Discourse con un esquema de color oscuro, usando un logotipo PNG blanco con fondo transparente:

Esperado (Gmail App Oscuro para Android):

image
image644×910 54.8 KB

Malo (Gmail Oscuro para iOS, OL Office 365 Oscuro, Outlook 2021 Oscuro, Correo de Windows 10 Oscuro):

image
image591×909 68.6 KB

image
image1468×929 38.8 KB

Resumen de clientes móviles (Gmail para iOS es el único cliente con problemas obvios con el color del encabezado):

image
image1261×1107 174 KB

Aquí está la misma prueba con el correo electrónico del resumen de Meta (esquema de color claro predeterminado, logotipo PNG oscuro sobre fondo transparente). Tenga en cuenta que Meta no tiene habilitada la configuración del sitio apply custom styles to digest (aplicar estilos personalizados al resumen), por lo que no está obteniendo las etiquetas y estilos de modo oscuro para los clientes que los admiten (Apple Mail y versiones recientes de Mail de iOS). Si la configuración apply custom styles to digest estuviera habilitada, sospecho que las pruebas de iPhone Oscuro también tendrían problemas de contraste entre el logotipo y el color de fondo.

image
image613×1011 64.1 KB

image
image526×898 94.2 KB

image
image1333×1137 329 KB

Hay un par de formas en que el color de fondo del encabezado del correo electrónico se puede forzar a que coincida con el color del esquema de color predeterminado del sitio:

Para la aplicación Gmail para iOS, el color de fondo del encabezado se puede establecer con una imagen de fondo creada con un linear-gradient. Las imágenes de fondo creadas de esta manera no invierten su color. El truco es establecer ambos colores del linear-gradient en el valor del color “fondo del encabezado” del esquema de color predeterminado del sitio de Discourse.

image
image638×901 70.8 KB

Esto se puede lograr ahora agregando CSS personalizado en la pestaña Admin / Customize / Email Style / CSS. Establezca los valores de color en el valor del color “fondo del encabezado” de su esquema de color predeterminado. (Tenga en cuenta que no es posible usar var(--header_background) para establecer el color en el editor de CSS de correo electrónico):

.digest-header {
    background-image: linear-gradient(#111, #111);
}

Probando este enfoque para el correo electrónico del resumen de Meta, estoy empezando a tener algunas dudas al respecto como solución para sitios que tienen un esquema de color predeterminado claro. El logotipo es legible, pero ¿esto se ve un poco raro?

image
image1283×612 184 KB

Para los clientes de correo electrónico de escritorio Outlook 2021 Oscuro y Correo de Windows 10 Oscuro, el problema de la inversión del color de fondo del encabezado se puede solucionar agregando una regla !important al background-color que se establece para .digest-header. Esto no se puede lograr a través de CSS personalizado porque Discourse ya está agregando un estilo background-color al elemento sin la regla !important. Esa regla se agrega después del CSS personalizado, por lo que tiene precedencia. (Tenga en cuenta que este enfoque solo parece funcionar para forzar el color de fondo a un color oscuro. Falla cuando intento usarlo para forzar el fondo del encabezado a #ffffff.)

El problema con el color del texto en la sección “Desde tu última visita” para los clientes de correo electrónico que realizan una inversión completa de color no parece tener una solución fácil. Aquí se sugiere un truco para Gmail en iOS: Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. Utiliza modos de fusión para engañar a Gmail para que establezca un color de texto blanco. Funciona en teoría, pero dada la complejidad del marcado del correo electrónico del resumen, no creo que valga la pena seguirlo.

En resumen, creo que para los sitios de Discourse que tienen un esquema de color oscuro como esquema de color predeterminado, una buena solución por ahora sería agregar el CSS que publiqué anteriormente a su pestaña Email Style / CSS. Esto hará que el logotipo del sitio sea legible en la aplicación Gmail Oscuro de iOS. Agregarlo no ha causado ningún problema con otros clientes de correo electrónico que he probado. Para los sitios que tienen un esquema de color claro predeterminado, no estoy tan seguro de ese enfoque. Forzar un fondo de encabezado blanco en una pantalla oscura no se ve bien.

El correo electrónico del resumen se desarrolló antes de que el modo oscuro se usara comúnmente. Quizás debido a la popularidad reciente del modo oscuro, tendría sentido rediseñar el correo electrónico del resumen con el objetivo de que se muestre bien tanto en modo oscuro como claro en los clientes de correo electrónico populares.

Si el rediseño completo del correo electrónico del resumen está fuera de alcance, podría valer la pena considerar la posibilidad de proporcionar configuraciones de dark_mode_digest_logo (logotipo del resumen en modo oscuro) y light_mode_digest_logo (logotipo del resumen en modo claro). En al menos algunos clientes de correo electrónico, será posible detectar el modo y mostrar el logotipo apropiado.

Para mejorar el modo oscuro en los clientes de escritorio de Outlook, Discourse podría dejar algunos nombres de clase en el HTML del correo electrónico en lugar de eliminarlos todos. Estos nombres de clase podrían usarse para apuntar al modo oscuro en Outlook: https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (Tenga en cuenta que Outlook no puede manejar múltiples nombres de clase en un elemento, por lo que algunos nombres de clase aún necesitarían ser eliminados del archivo digest.html.erb.)

7 Me gusta
2

Me di cuenta de que quizás no expresé el problema más obvio con suficiente claridad. La configuración del sitio apply custom styles to digest (aplicar estilos personalizados al resumen) está habilitada por defecto. Esa configuración se utiliza para agregar etiquetas meta y reglas CSS que hacen que los clientes de correo electrónico de iOS muestren los correos electrónicos en modo oscuro si el usuario ha habilitado el modo oscuro en el dispositivo.

A menos que se tenga especial cuidado al cargar un logotipo de resumen que tenga suficiente contraste tanto con fondos claros como oscuros, los correos electrónicos de resumen de sitios que tienen un logotipo optimizado para fondos claros, vistos en modo oscuro en clientes de correo electrónico populares, se verán similares a esto:

image
image1279×1119 211 KB

Deshabilitar la configuración del sitio apply custom styles to digest (aplicar estilos personalizados al resumen) en realidad producirá mejores resultados. Con esa configuración deshabilitada, los estilos de modo oscuro no se aplicarán a las aplicaciones de correo de iOS. Sin embargo, todavía se aplicarán a los clientes de correo electrónico de Android y a la aplicación Gmail de iOS.

Posiblemente, la mejor práctica actual debería ser intentar cargar un logotipo en la configuración del sitio digest logo (logotipo del resumen) que se vea bien tanto en fondos claros como oscuros. Si eso no se puede hacer, los sitios de Discourse con un esquema de color predeterminado claro deberían deshabilitar la configuración del sitio apply custom styles to digest (aplicar estilos personalizados al resumen). Los sitios de Discourse con un esquema de color predeterminado oscuro deberían mantener la configuración habilitada. No tomes el consejo sobre la configuración del sitio apply custom styles to digest (aplicar estilos personalizados al resumen) como definitivo todavía, pero según algunas pruebas, parece ser el enfoque correcto.

Esto solo funcionaría para los clientes de correo electrónico que admiten @media (prefers-color-scheme): Can I email… @media (prefers-color-scheme). Existiría cierto riesgo de que ambas versiones del logotipo aparezcan en otros clientes de correo electrónico.

5 Me gusta
3

Gracias por este minucioso trabajo, Simon :+1: :exploding_head:

Esto es terrible. Lo experimento en mi smartphone y ni siquiera entiendo cómo invertir forzosamente los colores, independientemente del contenido, se consideró una buena idea.

3 Me gusta
4

Me pregunto si una posible solución podría ser que, en lugar de usar el logo, creemos una imagen en formato rectangular usando el logo del sitio y el color de fondo del encabezado que usa actualmente el sitio.

Tendríamos que hacer esto en el backend, pero usar un bloque de imagen con el color incluido como fondo evitaría que Gmail invierta el color del fondo.

Por si sirve de algo, probé varios correos electrónicos de grandes marcas en mi aplicación de Gmail mientras estaba en modo oscuro, y la mayoría de ellos tampoco lo han resuelto.

2 Me gusta
5

Sin hacer eso, es posible forzar colores de fondo específicos en la mayoría de los clientes de correo electrónico, las excepciones parecen ser algunos de los clientes de correo electrónico de escritorio de Outlook más antiguos. (Supongo que el modo oscuro no se usa mucho en los clientes de escritorio).

Para los clientes de correo electrónico de iOS (excluyendo Gmail), Discourse ya está haciendo esto si la configuración apply custom styles to digest está habilitada. El problema es que codifica en exceso el color de fondo y no respeta el color “header background” del sitio:

La regla [dm='header'] podría cambiarse a:

"
[dm='header'] {
  background: ##{ColorScheme.hex_for_name('header_background')} !important;
}
"

Si tuviera sentido, se podría tomar un enfoque similar para la sección “Since your last visit”:

"
[dm='body_primary'] {
  background: #{SiteSetting.email_accent_bg_color} !important;
  color: #{SiteSetting.email_accent_fg_color} !important;
}
"

Tenga en cuenta que el atributo dm para los estilos del modo oscuro se agrega al correo electrónico aquí: discourse/lib/email/styles.rb at main · discourse/discourse · GitHub.

Algo así debería funcionar para solucionar el problema en los clientes de correo electrónico de iOS (excluyendo Gmail).

Para el cliente de Gmail de iOS, los colores de fondo se pueden forzar estableciéndolos con un degradado lineal. No parece haber ningún efecto secundario no deseado al establecer un color de fondo de degradado lineal de esta manera para todos los clientes de correo electrónico. Por lo tanto, debería estar bien simplemente agregar un color de fondo de degradado lineal al CSS en línea que se envía a todos los clientes de correo electrónico.

Mi sospecha es que la solución más fácil para tratar con la sección “Since your last visit” para los clientes de correo electrónico que realizan una inversión completa de color sería simplemente dejar que los clientes realicen la inversión, pero asegurarse de que haya un gran contraste entre la configuración de email accent accent bg color y email accent fg color:

image
image766×219 17 KB

Eso debería evitar casos como este (con los valores predeterminados de esas configuraciones):

image
image532×623 47.5 KB

1 me gusta
6

El cambio más sencillo que Discourse podría hacer ahora para aumentar la probabilidad de que los correos electrónicos de resumen se muestren correctamente en modo oscuro sería no habilitar la configuración del sitio apply custom styles to digest (aplicar estilos personalizados al resumen) por defecto. (Nota: esto solo afectará a los clientes de correo electrónico de iOS).

Otro pequeño cambio sería actualizar el texto de la configuración del sitio digest logo (logotipo del resumen) para fomentar la carga de un logotipo que tenga suficiente contraste cuando se muestre sobre un fondo de color claro u oscuro. El truco habitual para los logotipos oscuros es añadir un contorno blanco al logotipo.

Posiblemente, la página Emails / Preview summary (Correos electrónicos / Resumen de vista previa) debería mostrar una advertencia de que algunos clientes de correo electrónico realizarán una “inversión completa de color” cuando el correo electrónico se vea en modo oscuro. Se podría animar a los propietarios del sitio a probar sus correos electrónicos de resumen en modo oscuro en los clientes de correo electrónico a los que tengan acceso.

1 me gusta
7

¡Gracias por los detalles!

Como solución rápida, agregué este CSS en la configuración de Correos electrónicos:

@media (prefers-color-scheme: dark) {
    body > div > table > tbody > tr > td > table[dm="header"] {
        background: #c89f4c !important;
    }
}

Esto hace que el fondo del encabezado sea más claro y mi logotipo ahora se muestra correctamente (al menos en la vista previa).