Home  >  Q&A  >  body text

Is there a way to target Windows Mail 10 and 11 without affecting the Outlook desktop?

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 &amp; 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.

P粉722409996P粉722409996205 days ago469

reply all(1)I'll reply

  • P粉208286791

    P粉2082867912024-03-28 11:21:50

    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:

    /* Windows Mail (Phone & Surface) */
    _:-ms-input-placeholder, :root .your-class-name {
      /* Replace this comment with your styles */
    }

    or

    /* Windows Mail (Phone & Surface) */
    _:-ms-fullscreen, :root .your-class-name {
      /* Replace this comment with your styles */
    }

    Both articles were submitted by Mark Robbins to https://howtotarget.email/.

    reply
    0
  • Cancelreply