CODEWITHSUNDEEP
htmlcssoutlookhtml-email
user1574598
user1574598

Reputation: 3881

Outlook 365 Mac Background Color Darker in Dark Mode - Email Template

I've noticed with Office 365 on Mac (and outlook.com via Chrome) that my teal color that is being used to segregate my email template up into sections is being darkened in dark mode.

Here is the color difference:

Normal Color Darker Color

Here is the markup for my social icons that appears at the top of the email, and the media query for darkmode:

@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 SOCIAL ICONS -->
    <tr>
       <td style="padding: 0;">

          <table cellpadding="0" cellspacing="0" border="0" class="darkmode-social" width="100%" style="border-spacing: 0; background-color: #60C1CB;" role="presentation">
             <tr>
                <td style="text-align: center; padding: 10px 0 8px 0;">
                   <a href="*" target="_blank"><img src="https://i.ibb.co/k9vM0n0/white-facebook.png" width="32" alt="FaceBook" title="FaceBook" border="0"></a>
                   <a href="*" target="_blank"><img src="https://i.ibb.co/N9m4YDb/white-twitter.png" width="32" alt="Twitter" title="Twitter" border="0"></a>
                   <a href="*" target="_blank"><img src="https://i.ibb.co/qJ9R652/white-instagram.png" width="32" alt="Instagram" title="Instagram" border="0"></a>
                   <a href="*" target="_blank"><img src="https://i.ibb.co/jLDDZH2/white-youtube.png" width="32" alt="YouTube" title="YouTube" border="0"></a>
                </td>
             </tr>
          </table>

       </td>
    </tr>
<!-- END SOCIAL ICONS -->
</table>

I can add more markup if this is not sufficient enough.

Upvotes: 1

Views: 959

Answers (1)

Nathan
Nathan

Reputation: 5204

According to Litmus sampling, Outlook 2019 (MacOS)'s dark mode behaviour is a 'partial invert', and @media only partially works. The background of some areas will still be darkened, as you have experienced, if the colour is deemed to light.

There is a hack, though, where if you add another class to a nested tag, let's say the <td>, with NO inline colour, the algorithm won't change this CSS.

So try moving class="darkmode-social" to the <td>, i.e.:

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing: 0; background-color: #60C1CB;" role="presentation">
         <tr>
            <td class="darkmode-social" style="text-align: center; padding: 10px 0 8px 0;">

Upvotes: 1

Related Questions