Arregla problemas de Outlook en modo oscuro (diseño de email)

El fallo de Outlook para Windows que ocasiona cambios impredecibles en el color del texto es uno de los muchos problemas abrumadores con los que sin duda te has encontrado si alguna vez has trabajado con el diseño de emails en HTML para el modo oscuro.

Microsoft Outlook en modo oscuro invierte brutalmente los colores, en algunos casos incluso convirtiendo los tonos oscuros en blancos. Esto no solo puede causar que partes de tu correo electrónico tengan una apariencia desagradable, sino que también es posible que el texto se vuelva completamente ilegible.

Este tutorial de Outlook te mostrará cómo arreglar algunos de los peores comportamientos de esta aplicación en lo que respecta al color del texto en el modo oscuro.

Make Emails That Work Perfectly in Dark Mode

A continuación

• En la parte 1 de este tutorial de Outlook 365 y su modo oscuro, echaremos un vistazo a los cambios de color del texto cuyo tono ha sido estilizado usando únicamente HTML y CSS.
• La parte 2 se ocupará de cómo arreglar el fallo de Outlook que ocasiona cambios de color en el texto dentro de las formas VML (siglas de Vector Markup Language, o Lenguaje de marcado de vectores).

1. Cómo arreglar Outlook y los cambios de color del texto que tienen un tono simple

Digamos que tienes un área verde mediana con texto grande y de color blanco, como en este caso. El cuerpo tiene texto oscuro sobre un verde mucho más pálido.

Sin embargo, en los correos electrónicos en Outlook modo oscuro, con los colores cambiados, si bien el fondo del encabezado apenas se modifica, el texto se ha vuelto casi negro. Y aunque la mayoría de los usuarios todavía puede leerlo, este no es el efecto que quieres lograr. Lo que quieres es que sea de color blanco.

Solución: Aplica un degradado de texto de Microsoft

El motor de representación de Microsoft Word es lo que impulsa la representación de los diseños de emails en Microsoft Outlook. Si has usado Word, sabes que puedes estilizar tu texto de muchas maneras diferentes, y una de ellas es agregando un degradado.

Estos degradados también se representan en Outlook, lo cual es perfecto, pero, en el modo oscuro, los degradados se eliminan. Este comportamiento es desafortunado si quieres utilizar un verdadero degradado de varios colores, pero es una excelente noticia si quieres arreglar Outlook y su problema con el texto en los correos del modo oscuro, ya que esto nos proporciona una manera de controlar el modo claro y el modo oscuro por separado.

Si creamos un "degradado" compuesto por un solo color, podemos aplicarlo a nuestro texto y este último se mostrará en modo claro.

En Outlook modo oscuro, el degradado se elimina, lo que revela el color alternativo configurado para tu texto. Entonces, Outlook tratará el color alternativo de acuerdo con su algoritmo de modo oscuro, oscureciéndolo o invirtiéndolo como lo haría con cualquier color de texto normal.

Esto significa que debemos ser un poco astutos y asegurarnos de elegir un color alternativo que se convierta en el color que queremos obtener en el modo oscuro de Outlook 365. Una vez que entendamos esto, podemos tener un control total sobre la apariencia de nuestro texto en ambos modos.

Cómo implementar un degradado de MSO para solucionar los problemas de Outlook

En primer lugar, identifica el código que necesitas corregir. En este caso, estoy corrigiendo un párrafo de texto que quiero que se mantenga de color blanco.

Agrega una clase al código que quieras corregir. Aquí, quiero asegurarme de que mi texto permanezca de color blanco en los correos electrónicos en modo oscuro, por lo que estoy usando .keep-white.

Recuerda que Outlook no respetará el uso de varias clases en los elementos, así que asegúrate de que esta sea la única clase de tu elemento. Si ya tiene una clase aplicada, utilízala, o encuentra alguna otra forma de modificar el elemento.

1

<p class="keep-white" style="color:#ffffff;">Este texto permanecerá en BLANCO</p>

A continuación, ve a la sección head de tu archivo y agrega este código condicional, que cuenta con un bloque de estilo en su interior y contiene una regla CSS con tu nuevo nombre de clase.

1

<!--[if gte mso 16]>

2

    <style>

3

        .keep-white {}

4

    </style>

5

<![endif]-->

El comentario condicional limitará la visibilidad de este código a las versiones de Microsoft Outlook posteriores o iguales a "mso 16" (indicado en el código como "gte mso 16", "greater than o equal to mso 16" en inglés). Esto se enfoca en Outlook 2016 y versiones posteriores, incluyendo la versión de Microsoft 365, que es a la que nos dirigimos.

Los clientes más antiguos incluidos en este grupo (como Outlook 2016) seguirán aplicando el degradado en modo claro, lo cual es correcto, y no tienen un modo oscuro, por lo que no pasará nada en ese sentido. Entonces, ¿por qué no aplicamos este código para resolver los problemas de Outlook en todas sus versiones? Bueno, he notado que las versiones anteriores, como Outlook 2007, no aplican los degradados correctamente. En su lugar, muestran el color alternativo, que no se ve bien si se muestra en el modo claro. Limitar a gte mso 16 evita fácilmente este fallo de Outlook.

Cómo obtener el código del degradado

Ahora necesitamos el CSS para nuestro degradado de un solo color en el modo claro. Si simplemente necesitas un degradado blanco y uno negro, puedes usar estos fragmentos de código.

Negro:

1

mso-style-textfill-type:gradient;

2

mso-style-textfill-fill-gradientfill-stoplist:"0 \#000000 1 100000\,99000 \#000000 1 100000";

Blanco:

1

mso-style-textfill-type:gradient;

2

mso-style-textfill-fill-gradientfill-stoplist:"0 \#FFFFFF 0 100000\,100000 \#FFFFFF 0 100000";

Para otros colores, puede que tengas algo de suerte simplemente sustituyendo algunos de los valores hexadecimales. Sin embargo, la estructura de la lista de paradas es un poco arcana, ya que se deriva del estándar Open Office XML (OOXML) para dibujar formas con un relleno degradado. Como ejemplo, aquí puedes ver el CSS para un degradado púrpura:

1

mso-style-textfill-type: gradient;

2

mso-style-textfill-fill-gradientfill-stoplist: "0 \#7030A0 -1 100000\,99000 \#7030A0 -1 100000";

Puedes consultar las especificaciones para comprender mejor este código y, a partir de ahí, puedes intentar generar manualmente tu propio degradado CSS.

Sin embargo, esto no es algo muy intuitivo y, francamente, hay una manera más sencilla de hacerlo si tienes acceso a Microsoft Word: puedes dejar que Word haga el trabajo duro por ti y luego copiar el código CSS resultante. Así es como puedes lograrlo:

1. Abre Microsoft Word.
2. Escribe un par de palabras.
3. Ve a Formato > Efectos de texto (Mac), o haz clic en el icono Color de texto en la cinta y luego ve a Degradado > Más degradados (Mac y Windows).
4. Ahí puedes configurar un degradado con dos paradas del mismo color (en este caso voy a usar el color blanco).
5. Cuando termines, guarda tu archivo como una "Página web" (con la extensión .htm o .html).
6. Abre el archivo HTML en tu editor de código y desplázate hasta el final para encontrar las palabras que escribiste, las cuales estarán envueltas por una etiqueta paragraph y una span que contendrán el código CSS que queremos.

El código CSS tendrá un aspecto similar al siguiente:

1

<p class=MsoNormal><b><span lang=EN-GB style='font-size:22.0pt;line-height:120%;mso-style-textfill-type:gradient;mso-style-textfill-fill-gradientfill-shadetype:linear;mso-style-textfill-fill-gradientfill-shade-linearshade-angle:5400000;

2

mso-style-textfill-fill-gradientfill-shade-linearshade-fscaled:no;mso-style-textfill-fill-gradientfill-stoplist:"0 \#FFFFFF 0 100000\,100000 \#FFFFFF 0 100000"'>Hola, este es un poco de texto.<o:p></o:p></span></b></p>

Según mi experiencia, solo necesitas dos fragmentos de este código, primero la línea que especificará que queremos un degradado:

1

mso-style-textfill-type:gradient;

Y la lista de paradas de color:

1

mso-style-textfill-fill-gradientfill-stoplist:"0 \#FFFFFF 0 100000\,100000 \#FFFFFF 0 100000";

Una vez que tengas la primera línea y tu lista de paradas, agrégalas a tu regla CSS para que se vea así:

1

<!--[if gte mso 16]>

2

    <style>

3

        .keep-white {

4

            mso-style-textfill-type:gradient;

5

            mso-style-textfill-fill-gradientfill-stoplist:"0 \#FFFFFF 0 100000\,100000 \#FFFFFF 0 100000";

6

        }

7

    </style>

8

<![endif]-->

De esta manera hemos configurado nuestro degradado, y esto es lo que se mostrará en el modo claro.

Ahora es momento de trabajar en la parte que realmente soluciona nuestros problemas de Outlook: agregar nuestro color alternativo.

Como vimos anteriormente, Outlook modo oscuro descartará el degradado, leerá el color alternativo y luego lo ajustará o lo invertirá como lo haría normalmente. Esto significa que debemos elegir un color que Outlook convertirá a nuestro color objetivo en el modo oscuro.

Dado que quiero obtener el color blanco, esto es sencillo: el modo oscuro de Microsoft Outlook invierte completamente el blanco y el negro, por lo que solo necesito que el color alternativo sea negro.

Voy a añadir el valor de mi color alternativo a la regla CSS, y agregaré !important para garantizar que este sobrescriba el estilo en línea que tengo en mi etiqueta paragraph, que establece el texto en blanco para todos los demás clientes. Ahora, mi regla CSS se ve así:

1

<!--[if gte mso 16]>

2

    <style>

3

        .keep-white {

4

            mso-style-textfill-type:gradient;

5

            mso-style-textfill-fill-gradientfill-stoplist:"0 \#FFFFFF 0 100000\,100000 \#FFFFFF 0 100000";

6

            color:#000000 !important;

7

        }

8

    </style>

9

<![endif]-->

¡Y eso es todo! Al enviar un correo de prueba, ahora veo que mi texto permanece de color blanco en Outlook de Microsoft 365, sin importar si estoy usando el modo claro o el modo oscuro.

Un comentario sobre cómo trabajar con texto en color

Como has visto en los pasos anteriores de este tutorial de Outlook, generar tu degradado en Word para el modo claro es sencillo. Lo complicado es encontrar el color alternativo adecuado, ya que puede ser difícil predecir si Outlook invertirá un color en el modo oscuro o si simplemente lo ensombrecerá.

Sin embargo, a través de un poco de ensayo y error, puedes obtener los resultados que necesitas. Puede ser útil enviar algunas muestras de color a Outlook para identificar el tono correcto en el modo oscuro. Luego, puedes usar cualquier color hexadecimal que haya resultado en ese tono en el modo oscuro y usarlo como alternativa.

2. Corrección del fallo de Outlook que ocasiona cambios de color del texto dentro de VML

Si has trabajado con VML y con Outlook en modo oscuro, no te parecerán extraños los problemas a los que puedes enfrentarte. Lo más molesto es el hecho de que ni los rellenos ni las imágenes de VML se ajustan en Outlook modo oscuro, pero los colores del texto sí. Esto puede dar como resultado un texto completamente ilegible, como en este caso:

Desafortunadamente, si abres un diseño de email en Outlook modo oscuro, el texto dentro de un bloque de VML tiende a comportarse de manera diferente al texto normal, por lo que la solución anterior para arreglar Outlook no funciona de manera confiable dentro de VML.

La razón principal por la que esto ocurre es algo más bien extraño; parece que hay dos algoritmos diferentes para el modo oscuro que funcionan en diferentes copias de Outlook 365.

He observado resultados completamente diferentes al comparar la versión de Outlook 365 que ofrece Litmus y las versiones de Email on Acid, Testi y mi propia PC con Windows 10.

Curiosamente, cuando usas el truco anterior para arreglar Outlook usando un degradado, la versión en Litmus no invierte el color alternativo, simplemente lo muestra tal cual es.

Ya que claramente existen en circulación diferentes copias de la versión más reciente de Outlook, que harán dos cosas completamente diferentes, la solución anterior ya no es viable para nuestro problema.

El problema con los textfill

Esta discrepancia también puede explicar por qué otro truco popular para tratar de arreglar Outlook y su problema con el texto funciona para algunos desarrolladores de correo electrónico mientras que para otros no.

Una sugerencia popular es usar, por ejemplo, mso-style-textfill-fill-color:#000000; para garantizar que el texto permanezca de color negro en el modo oscuro del correo de Outlook.

El resultado de este textfill-fill sólido no se elimina en el modo oscuro, como ocurre con los degradados, pero también hay una discrepancia importante entre cómo se interpreta dentro de VML en diferentes copias de Outlook.

Como puede ver a continuación, cuando se aplica un textfill de color negro sobre un relleno de VML de color blanco, todas las copias de Outlook lo muestran como un gris claro en modo oscuro.

Sin embargo, cuando usas un textfill de color blanco sobre una forma de VML negra, en Email on Acid, Testi y en mi propia PC, en realidad se ve de un color gris muy oscuro, mientras que en Litmus se muestra de un color gris pálido.

De manera similar con los textfill coloreados de VML, Email on Acid, Testi y mi máquina muestran una tendencia a oscurecer (en su mayoría) los textfill, mientras que la versión en Litmus tiende a aclarar y a quitar saturación.

Lamentablemente no tengo idea de lo que realmente está sucediendo aquí, pero al menos sabemos que podemos descartar por completo tanto mso-style-textfill-type:gradient como mso-style-textfill-fill-color cuando se trata de solucionar los problemas de Outlook con el texto en modo oscuro dentro de VML.

Una forma de evitar todo esto

Una forma de evitar este fallo de Outlook, que causa una diferencia de comportamiento entre el texto dentro y fuera de VML, es usar el posicionamiento CSS y el índice z para colocar el contenido de tu diseño de email encima de tu contenido en VML, lo que mantiene el contenido de tu texto separado de tu contenido en VML. Si esta es una alternativa viable para ti, esto te permitirá evitar que el texto sea tratado de manera diferente, y el truco para solucionar problemas de Outlook con mso-style-textfill-type:gradient, que vimos en la parte 1, funcionará perfectamente para ti.

Sin embargo, eso no siempre es posible. Entonces ¿qué más se puede hacer para arreglar Outlook?

Una solución experimental para el interior de VML: Cómo aprovechar el poder de color:auto;

A lo largo de mi búsqueda dentro de muchos archivos HTML diferentes generados por Word, he notado que hay algunos valores de color que aparecen con frecuencia, como color:window;, color:windowText; y color:auto;. No tuve gran suerte con muchos de ellos después de hacer pruebas, pero auto realmente parece tener el poder de calcular el color automáticamente, y resulta que puedes usarlo dentro de VML para garantizar que tu texto se muestre de color blanco o negro, sin cambiar en absoluto entre los modos oscuro y claro.

Sus cálculos parecen basarse en una combinación del fondo del cuerpo y del color de relleno de VML (otros elementos de diseño o contenedores con sus propios colores de fondo aplicados no parecen tener ningún efecto adicional en el cálculo). Si tienes un fondo oscuro para el cuerpo y un relleno de VML de color claro, entonces color:auto; da como resultado un color negro o un gris muy oscuro. Si tienes un fondo claro para el cuerpo y un relleno de VML oscuro, entonces color:auto; da como resultado un color blanco o un gris muy pálido.

Como guía general, los puntos de inflexión para la escala de grises parecen ser los siguientes.

Si necesitas texto de color blanco

• El fondo del cuerpo debe tener un valor de #555555 o más claro.
• El relleno de VML debe tener un valor de #333333 o más oscuro.

Si necesitas texto de color negro

• El fondo del cuerpo debe tener un valor de #444444 o más oscuro.
• El relleno de VML debe tener un valor de #555555 o más claro.

¿Es posible arreglar ambos parámetros en el mismo correo electrónico?

En una palabra: no. En la mayoría de los casos, en tu diseño de email solo puedes resolver los problemas de los elementos de texto en blanco o en negro, no ambos, ya que color:auto; se calcula parcialmente a partir del color de fondo del cuerpo, que obviamente es global. Siéntete libre de experimentar, ya que es posible que tú tengas mejor suerte, pero es probable que debas priorizar una categoría de elementos que debe corregirse si tienes muchos elementos VML de diferentes colores en tu correo electrónico.

Los colores son más difíciles de precisar y explicar, pero me parecen bastante indulgentes: haz pruebas con ellos. Tal parece que solo necesitas crear un contraste suficiente entre los elementos para garantizar que color:auto; dé como resultado el mismo color y que no cambie si usas el modo oscuro o el claro.

Veamos cómo aplicar el blanco y el negro.

Cómo mantener el texto de color negro dentro de VML en el modo oscuro

1. Asegúrate de que tu fondo de cuerpo sea oscuro

En primer lugar, asegúrate de que tu fondo de cuerpo sea de color oscuro, con un valor de #444444 o más oscuro. Si estás usando colores, entonces un tono relativamente oscuro debería funcionar bien, pero es posible que debas experimentar un poco.

1

<body style="background-color:#444444;">

Quizá prefieras aplicar el color de fondo usando un CSS condicional solo para Outlook 2016 y versiones posteriores en el encabezado. Esto depende de ti. Si quieres hacer eso, agrega lo siguiente al encabezado de tu código:

1

<!--[if gte mso 16]>

2

    <style>

3

        body {

4

            background-color:#444444 !important;

5

        }

6

    </style>

7

<![endif]-->

2. Asegúrate de que tu relleno de VML sea de color claro

Si quieres un texto de color negro, entonces lo más probable es que ya sea claro de todos modos. Si tienes un relleno de imagen, esto no representará ninguna diferencia para ti, ya que no verás el color detrás de la imagen.

Si solo tienes una forma v:shape, como una v:oval o una v:rect, entonces establece el fillcolor para que tenga un valor de #555555 o más claro:

1

<v:rect fillcolor="#555555">

Alternativamente, si tienes un elemento v:fill, configura el color en #555555 o más claro:

1

<v:fill type="frame" src="imagen.jpg" color="#555555" />

3. Aplica el color automático de CSS

En lugar de usar color:auto;, creo que la mejor manera de hacer esto es agregar mso-color-alt:auto; al código CSS de tu elemento, ya que esto anulará convenientemente cualquier color que ya tengas establecido en él y solo funcionará en Outlook, sin causar problemas en ningún otro cliente. Simplemente puedes agregarlo en línea después de tu color de texto:

1

<p style="margin:0;color:#000000;mso-color-alt:auto;">Texto negro</p>

Alternativamente podrías agregar una clase a tu elemento, de esta manera:

1

<p class="vml-black" style="margin:0;color:#000000;">Texto negro</p>

Luego agrega este CSS al encabezado de tu correo electrónico, limitándote a las nuevas versiones de Outlook, solo por seguridad:

1

<!--[if gte mso 16]>

2

    <style>

3

        .vml-black {

4

            mso-color-alt: auto;

5

        }

6

    </style>

7

<![endif]-->

¡Y eso es todo! Ahora envía un correo de prueba y verás que tu texto aparece oscurecido y legible en los modos claro y oscuro.

Cómo mantener el texto de color blanco dentro de VML en el modo oscuro

1. Asegúrate de que tu fondo de cuerpo sea claro

En primer lugar, asegúrate de que tu fondo de cuerpo sea de color claro: #555555 o más claro. Si estás usando colores, entonces un tono relativamente claro debería funcionar bien, pero es posible que debas experimentar un poco.

1

<body style="background-color:#555555;">

Si prefieres hacer esto usando un CSS condicional solo para Outlook, también es posible: 

1

<!--[if gte mso 16]>

2

    <style>

3

        body {

4

            background-color:#555555 !important;

5

        }

6

    </style>

7

<![endif]-->

2. Asegúrate de que tu relleno de VML sea de color oscuro

Si esperas tener un texto de color blanco, entonces lo más probable es que ya sea de color oscuro de todos modos. Si tienes un relleno de imagen, esto no representará ninguna diferencia para ti, ya que no verás el color detrás de la imagen.

Si solo tienes una forma v:shape, como una v:oval o una v:rect, entonces establece el fillcolor para que tenga un valor de #333333 o más oscuro:

1

<v:rect fillcolor="#333333">

Alternativamente, si tienes un elemento v:fill, establece el color en #333333 o más oscuro:

1

<v:fill type="frame" src="imagen.jpg" color="#333333" />

3. Aplica el color automático de CSS

En lugar de usar color:auto;, creo que la mejor manera de hacer esto es agregar mso-color-alt:auto; al código CSS de tu elemento, ya que esto anulará convenientemente cualquier color que ya tengas establecido en él y solo funcionará en Outlook, sin causar problemas en ningún otro cliente. Simplemente puedes agregarlo en línea después de tu color de texto:

1

<p style="margin:0;color:#ffffff;mso-color-alt:auto;">Texto de color blanco</p>

Alternativamente podrías agregar una clase a tu elemento, de esta manera:

1

<p class="vml-white" style="margin:0;color:#ffffff;">Texto de color blanco</p>

Luego simplemente agrega este CSS al encabezado de tu correo electrónico, limitándote a las nuevas versiones de Outlook, solo por seguridad:

1

<!--[if gte mso 16]>

2

    <style>

3

        .vml-white {

4

            mso-color-alt: auto;

5

        }

6

    </style>

7

<![endif]-->

¡Y eso es todo! Ahora envía un correo de prueba y verás que tu texto se muestra legible y de color blanco tanto en el modo claro como en el modo oscuro.

3. Prueba, prueba ¡y prueba más!

Por supuesto, como con cualquier solución de código para correos electrónicos HTML, cuando se trata de experimentar en tus propios proyectos, siempre asegúrate de hacer pruebas exhaustivas.

Como hemos visto anteriormente en este tutorial de Outlook, también es importante probar el modo oscuro de Outlook de Microsoft 365 en más de un proveedor; idealmente, si usa Litmus también deberías intentar conseguir una cuenta de Email on Acid o de Testi, o configurar tu propia PC con Windows 10 para probar y asegurarte de estar viendo la gama completa de todos los posibles resultados en Outlook de Microsoft 365. 

Obtén más información sobre el modo oscuro en el correo electrónico

Conclusión

El truco con color:auto; para resolver problemas de Outlook es definitivamente experimental, pero ha estado funcionado muy bien para mí. Espero que los dos consejos de este tutorial de Outlook puedan ahorrarte algo de tiempo y evitarte el estrés, y me encantaría saber sobre tus experimentos y resultados al implementar cualquiera de estos trucos en tus propios correos electrónicos.