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

Question

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:

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;
     }
  }

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

user_8942566 · Answer

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 , with NO inline colour, the algorithm won't change this CSS.

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

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

1 Answers