I have a code hack that preserves white text on a black background in most dark mode clients except Windows Mail 10 and 11.
<!--[if mso 16]> Conditional statements work on Outlook (OL 365, OL 2021) desktop but do not display correctly in Windows Mail 10 and 11. Windows Mail likes the css used in <! --[if !mso 16]> conditional blocks. Are there mso condition codes specifically for Windows Mail 10 and 11?
Is there another way to apply styles to separate Outlook (OL Office 365 Dark, Outlook 2021 Dark) and Windows Mail?
<!--[if gte mso 16]> <style> .keep-white { mso-style-textfill-type:gradient; mso-style-textfill-fill-gradientfill-stoplist:"0 #FFFFFF 0 100000\,100000 #FFFFFF 0 100000"; color:#000000 !important; } </style> <![endif]--> <style> u + .body .gmail-screen { background:#000; mix-blend-mode:screen; } u + .body .gmail-difference { background:#000; mix-blend-mode:difference; } </style>
<!--[if (gte mso 9)|(IE)]> <table align="center" cellpadding="0" cellspacing="0" border="0" style="width:640px;background-color:#000000;" role="presentation"> <tr> <td align="center"> <![endif]--> <table role="presentation" style="width:100%;max-width:640px;Margin:0 auto;" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center"> <tr> <td class="body" style="background: linear-gradient(to bottom, #000000 0%, #000000 100%);max-width:640px;" width="100%" valign="top" align="center"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;" fillcolor="#000000"> <v:fill type="gradient" color2="#000000"/> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> <center> <![endif]--> <table role="presentation" style="width:100%;max-width:640px;Margin:0 auto;" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="padding:40px 10px 40px;" align="center"> <p style="padding:0;margin:0;font-family:'Open Sans',Helvetica, Arial,sans-serif;font-size:24px;line-height:34px;color:#ffffff;text-align:center;" class="txt16"> <!--[if mso 16]><strong style="color:#ffffff;" class="keep-white"><![endif]--> <!--[if !mso 16]><!-- --><strong style="font-weight:400;color:#ffffff;" class="gmail-screen"><span class="gmail-difference"><!--<![endif]--> Combo text hack. Works everywhere except Windows 10 & 11 mail. <!--[if mso 16]></strong><![endif]--> <!--[if !mso 16]><!-- --></span></strong><!--<![endif]--> </p> </td> </tr> </table> <!--[if gte mso 9]> </center> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
I applied the <!--[if mso 16]> conditional statement for Outlook and Windows Mail 10 and 11, but found that Windows Mail dark mode handles css differently than Outlook dark mode.
Outlook Dark Mode
Dark Mode Meta Tag
Android/Outlook.com for dark mode
More information about Dark Mode can be found here:
https:// www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/
You can use one of two methods to locate Windows Mail:
or
Both articles were submitted by Mark Robbins to https://howtotarget.email/.