El soporte del modo oscuro en el correo se divide en tres grupos, y solo uno de ellos corresponde al CSS que diseña la mayoría de los remitentes. Algunos clientes respetan @media (prefers-color-scheme: dark) exactamente como está escrito. Otros lo reescriben silenciosamente en una sintaxis que nunca puede coincidir, y recurren en su lugar a sus propias heurísticas de auto-inversión. Un tercer grupo apenas reconoce la etiqueta meta color-scheme, más reciente. Diseñar solo para el primer grupo significa diseñar para menos de la mitad de la bandeja de entrada.
Grupo uno: clientes que respetan la media query
Según caniemail.com, @media (prefers-color-scheme: dark) cuenta con soporte completo en Gmail (todas las plataformas) y Apple Mail (macOS 12.4+ / iOS 13.0+). Outlook le sigue de cerca en la mayoría de sus superficies — Windows (2016+), macOS (16.70+), Outlook.com (2019-07+) y móvil (2020-01+) reconocen todos la media query, aunque macOS Outlook y Outlook.com además aplican sus propios atributos de datos de modo oscuro junto a ella. Samsung Email (Android 6.1+) también la implementa por completo. En conjunto, el panel probado de caniemail.com sitúa el soporte global en 41.86% — una mayoría real de los clientes importantes, pero lejos de todos.
Grupo dos: clientes que reescriben la media query en algo que nunca coincide
Este es el grupo que realmente produce los correos en modo oscuro con aspecto roto que la mayoría de los remitentes ha visto. Yahoo Mail, AOL y Fastmail no ignoran prefers-color-scheme sin más — la reescriben en una sintaxis inválida (@media ( _filtered_a )) que nunca puede evaluarse como verdadera, desactivando silenciosamente cada regla dentro de ella. HEY hace el equivalente reescribiendo la media query como @media (false). En ambos casos, el cliente recurre después a sus propias heurísticas automáticas de inversión de color sobre el diseño original en modo claro — lo cual es exactamente lo que produce logotipos deslavados y texto de bajo contraste ilegible que nadie diseñó explícitamente, porque nada de lo que escribió el remitente está realmente guiando el resultado.
Grupo tres: la etiqueta meta color-scheme, apenas adoptada
<meta name="color-scheme" content="light dark"> (y su prima supported-color-schemes) existe para indicar a un cliente para qué modo(s) está diseñado deliberadamente un correo, de modo que el cliente pueda omitir la auto-inversión por completo en lugar de adivinar. Es la solución más quirúrgica — pero según caniemail.com, la adopción combinada se sitúa en solo 4.88%, con soporte significativo limitado a las versiones más recientes de Apple Mail (macOS 16+ / iOS 12.4+) y Gmail en webmail de escritorio (2023-09+). La mayoría de los demás clientes la ignoran sin más.
Qué significa esto para el diseño
Ninguna regla CSS por sí sola cubre los tres grupos a la vez — esa es la consecuencia directa de la división anterior, no una carencia de ninguna técnica en concreto. El enfoque fiable es la mejora progresiva, el mismo principio al que llega la guía de modo oscuro de Litmus:
- Diseña primero un correo en modo claro sólido y totalmente legible. Es la base a la que recurren todos los clientes, incluidos los de auto-inversión del grupo dos.
- Añade encima alternativas explícitas de
prefers-color-scheme, para el ~42% de clientes que realmente las aplicarán — no confíes solo en la etiqueta meta dada su adopción mucho menor. - Blinda los logotipos e imágenes frente a la auto-inversión: un PNG semitransparente sobre un fondo blanco sólido puede invertirse en un desastre ilegible de oscuro sobre oscuro en los clientes del grupo dos. Un borde sutil o una franja de fondo sólido detrás del recurso sobrevive a la inversión de una forma que un PNG transparente desnudo no logra.
- Nunca supongas que un fondo oscuro implica un color de texto consciente del modo oscuro — la auto-inversión del grupo dos puede invertir un fondo sin tocar el texto de la forma en que un remitente esperaría, así que los colores de texto establecidos explícitamente importan más bajo el modo oscuro, no menos.
Consulta Soporte de clientes de correo para el mismo desglose por cliente aplicado al estudio y al motor de alternativas propios de MailInApp.