CODEWITHSUNDEEP
htmlcssoutlookhtml-email
user1574598
user1574598

Reputation: 3881

Outlook 365 Windows Not Respecting Darkmode Media Query - Email Template

For some reason, the text <p> in the footer section of my email template in Outlook 365 Windows is still remaining the color black. This is also happening for the button text too <a> but all other clients are fine when tested.

Here is the media query and footer markup:

@media (prefers-color-scheme: dark) {
     body, center, table {
        background: #2d2d2d!important;
        color: #ffffff!important;
     }
     .darkmode-footer {
        background-color: #7F7CAC!important;
     }
     .darkmode-social {
        background-color: #60C1CB!important;
     }
  }
  
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-spacing: 0px; color: #565656; font-family: 'Lato', sans-serif, Arial, Helvitica!important; background-color: #fafdfe; Margin: 0; padding: 0; width: 100%; max-width: 600px;" role="presentation">
    <!-- START FOOTER -->
        <tr>
           <td style="padding: 0;">
              <table cellpadding="0" cellspacing="0" border="0" class="darkmode-footer" width="100%" style="border-spacing: 0; background-color: #7F7CAC;" role="presentation">
                 <tr>
                    <td height="8" style="background-color: #21c6b8;"></td>
                 </tr>
                 <tr>
                    <td style="padding: 60px 10px 25px 10px; color: #ffffff; text-align: center; font-size: 16px;">
                       <p style="font-size: 18px; font-weight: bold; padding: 10px 0 5px 0;">Lorum</p>
                       <p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
                       <p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
                       <p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
                       <p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
                       <p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
                       <p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
                       <p style="font-size: 16px; padding-bottom: 20px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
                    </td>
                 </tr>
                 <tr>

                 </tr>
                 <tr>
                    <td height="8" style="background-color: #21c6b8;"></td>
                 </tr>
              </table>
           </td>
        </tr>
    <!-- END FOOTER -->
</table>

And here is a snippet of the button markup:

<tr>
    <td align="left" style="padding-left: 10px;">

       <table cellpadding="0" cellspacing="0" border="0" align="left" border="0" style="border-spacing: 0;" role="presentation">
          <tr>
             <td style="border-radius: 10px;" bgcolor="#60C1CB">
                 <a href="*" target="_blank" style="text-decoration: none; color: #ffffff; color: #ffffff; background-color: #60C1CB; border: 1px solid #60C1CB; border-radius: 10px; padding: 10px 25px; display: inline-block; font-size: 16px; font-weight: bold;">Lorum</a>
             </td>
          </tr>
       </table>

    </td>
 </tr>

I can add more markup if needed.

Upvotes: 2

Views: 586

Answers (1)

HTeuMeuLeu
HTeuMeuLeu

Reputation: 2751

Outlook on Windows uses Word’s rendering engine and does not support media queries.

The only possible tweak regarding dark mode in this version of Outlook is to use VML gradients. You can read more about it here: https://webdesign.tutsplus.com/tutorials/how-to-fix-outlook-dark-mode-problems--cms-37718

Upvotes: 1

Related Questions