Estoy usando el tema predeterminado sin componentes de tema ni personalización CSS. En Configuración, he especificado mi logo blanco de “modo oscuro” para el correo electrónico de resumen, porque el área de fondo del logo del resumen es oscura. Se ve muy bien, por lo general:
Sin embargo, cuando recibo un resumen (en la aplicación de Gmail) en un iPhone en modo oscuro del dispositivo, el área de fondo del logo se invierte a blanco (o casi blanco), haciendo que el logo sea casi invisible:
En el escritorio, puedo previsualizar el modo oscuro usando el inspector de Chrome. No invierte el color de fondo del logo a blanco. Pero sí intercambia mi logo predeterminado (de “modo claro”), haciéndolo casi invisible allí:
Esto me tiene bastante confundido… No sé si estoy viendo un error o si tengo una expectativa incorrecta sobre cómo funciona el modo oscuro en dispositivos móviles…
Me imagino que podría agregar un borde negro alrededor de mi logo predeterminado para que funcione mejor sobre un fondo claro.
Pero agradecería cualquier indicación para lograr combinaciones de logo+fondo de resumen que funcionen en todas las configuraciones.
Solo para confirmar, ¿ha realizado algún cambio en la plantilla de correo electrónico HTML de Discourse que se encuentra en Admin / Customize / Email Style? Además, ¿ha agregado algún CSS a la pestaña CSS que se encuentra en esa página?
Además, ¿está habilitada la configuración del sitio apply custom styles to digest en su sitio? Esa configuración está habilitada por defecto.
Suponiendo que las personalizaciones que haya realizado no estén causando el problema, mi suposición es que lo que está sucediendo es que el marcador %{dark_mode_styles} que se encuentra en la plantilla de correo electrónico predeterminada de Discourse está siendo reemplazado por el CSS que se agrega a través de este método:
Ese método agrega el siguiente CSS a la plantilla:
[dm='header'] {
background: #151515 !important;
}
Ese CSS está destinado a hacer que el encabezado del resumen sea oscuro cuando el correo electrónico se ve en un dispositivo que está configurado en modo oscuro, pero tal vez algunos dispositivos estén ignorando la directiva !important y mostrando el inverso del color.
No puedo reproducir el problema en mi teléfono Android. No tengo un iPhone para probarlo. ¿Quizás alguien más pueda intentar ver un correo electrónico de resumen en modo oscuro en un iPhone?
No he tocado el HTML o CSS personalizado de la plantilla de correo electrónico. Deshabilité apply custom styles to digest pero, como era de esperar, no tuvo ningún efecto.
Estaré encantado de enviar un correo electrónico de resumen si alguien quiere publicar o enviarme por mensaje privado una dirección…
He recibido correos electrónicos del sitio. Se ven correctamente en la aplicación de Gmail en mi teléfono Android en modo oscuro. No tengo un dispositivo iOS para probar.
En el dispositivo iOS de @ToddZ, obtiene los mismos resultados, esté habilitada o no la configuración apply custom styles to digest:
Supongo que la aplicación de Gmail para iOS todavía no admite la consulta de medios prefers-color-scheme: Can I email… @media (prefers-color-scheme). Esa página también dice que Android no la admite, pero los correos electrónicos se muestran correctamente en Gmail para Android para mí.
De forma algo relacionada, podría valer la pena señalar en algún lugar que la configuración apply custom styles to digest debe estar habilitada para que se aplique el CSS de modo oscuro que se agrega a la plantilla de correo electrónico.
@isaac, no estoy seguro de si todavía te encargas de esto. Podría valer la pena probar cómo Gmail en iOS está manejando esto. Especialmente cuando el tema predeterminado del sitio de Discourse utiliza un esquema de color oscuro.
Si tienes la oportunidad, ¿puedes intentar activar el mismo correo electrónico con la configuración del sitio apply custom styles to digest habilitada? ¿Hace alguna diferencia esa configuración en cómo se muestra el correo electrónico en modo oscuro en Thunderbird?
Además, ¿puedes verificar nuevamente para asegurarte de que la plantilla de correo electrónico que se encuentra en Admin / Customize / Email Style no haya sido editada? Si no ha sido editada, el botón “Reset to default” en esa página estará deshabilitado:
Lo que me pregunto es si las claves dark_mode_meta_tags y dark_mode_styles que resalté en la captura de pantalla anterior están presentes en la plantilla.
Estilo de correo electrónico: HTML y CSS están en los valores predeterminados y nunca se han modificado. HTML contiene las etiquetas meta de modo oscuro.
apply custom styles to digest: no hace ninguna diferencia, activado o desactivado.
La inversión completa de color es el esquema de color más invasivo: no solo invierte las áreas con fondos claros, sino que también afecta a los fondos oscuros.
Por lo tanto, si ya diseñó sus correos electrónicos para tener un tema oscuro, este esquema irónicamente los obligará a volverse claros. Desafortunadamente, esta es actualmente la táctica utilizada por algunos de los clientes de correo electrónico más populares, como la aplicación Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) y Windows Mail.
El ejemplo de la publicación sobre el problema coincide con lo que usted informa:
Alguien con acceso a la cuenta de Litmus de Discourse deberá probar esto. Para reproducir el problema, intente enviar un correo electrónico de resumen a Litmus desde un sitio de Discourse que tenga la paleta de colores de su tema predeterminado configurada en un esquema de color oscuro.
Suponiendo que esto desencadene el problema, la solución fácil sería usar siempre un esquema de color claro para los correos electrónicos, independientemente de la paleta de colores que se haya asignado al tema predeterminado en Discourse. También hay un enfoque sugerido en la sección “Gmail iOS y Outlook Windows-specific targeting” de la publicación que enlacé que podría funcionar. Sin embargo, es un poco un truco.
Quien termine investigando esto también podría observar la forma en que la configuración del sitio apply custom styles to digest actualmente necesita estar habilitada para agregar soporte de modo oscuro para clientes de correo electrónico que realmente admiten el modo oscuro. No hay nada en la interfaz de usuario de Discourse que haga obvio que esta configuración está relacionada con el soporte del modo oscuro.
Sí, wow, Invertir color completo parece ser lo que estoy viendo, al menos con el resumen/digest en Gmail de iOS.
No tengo el ancho de banda ahora mismo para analizar ese artículo completo y encontrar soluciones alternativas apropiadas, pero tendré que intentarlo eventualmente. El hilo de GitHub para publicar ejemplos de Gmail ha estado abierto desde 2019, y se han propuesto varias soluciones alternativas, pero no hay indicios de que el comportamiento subyacente vaya a cambiar.
Espero que el equipo de Discourse pueda hacer algunos ajustes generales para unificar la apariencia en todas las plataformas.
Basándome en el correo electrónico de resumen que he visto en tu sitio, supongo que tu sitio tiene un esquema de color oscuro por defecto. En ese caso, puedes solucionar el problema que ocurre con el color de fondo del encabezado en la aplicación Gmail de iOS añadiendo el siguiente código a la pestaña CSS de Administrador / Personalizar / Estilo de correo electrónico de tu sitio:
Ten en cuenta que los colores añadidos a linear-gradient deben ser iguales. Deben coincidir con el valor que se establece para el color “fondo del encabezado” de la paleta de colores del tema predeterminado de tu sitio:
Creo que este es un buen enfoque solo para sitios que tienen un esquema de color oscuro establecido como predeterminado. Los detalles sobre por qué funciona están aquí: Investigating activity summary email dark mode issues.
