Search code examples
outlookdarkmode

Outlook Dark Mode Office 365 on macOS Catalina Background color

I'm wondering if any HTML email developers can help me with this. I'm using Email on Acid to test HTML emails and the background color set inside of my buttons (when light in color) are being inverted. This only happens in "Outlook Office 365 on macOS Catalina Dark Mode". Would anyone know how to target it? Here is my HTML/CSS:

head:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

HTML:

<td align="center">
  <a class="darkmode-light-button" href="https://example.com" target="_blank" style="font-size: 17px;font-weight: bold;text-decoration: none;color: #1e5d7b;background-color: #dde0e1;border-top: 12px solid #dde0e1;border-bottom: 12px solid #dde0e1;border-right: 20px solid #dde0e1;border-left: 20px solid #dde0e1;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;display: inline-block;">VIEW DEMO</a>
</td>

CSS:

/* Custom Dark Mode Colors */
:root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
    .darkmode-light-button {
       background-color: #dde0e1!important;
    }
}

I've also tried the osgb attribute for Outlook but no such luck. I'm aware there was a related post on this (Override Outlook dark mode button background) but there was no solution so I thought I'd give it one more shot here.

Note: applying the border/background color to the table data tag solves it but then the whole button doesn't act as a link of course.

Thanks!

enter image description here

Solution

  • Figured this out :)

    <tr>
 <td align="center" style="border-radius:10px" bgcolor="#EFF8FE">
  <a href="https://example.com" target="_blank" style="font-size: 17px;font-weight: bold;text-decoration: none;color: #1e5d7b;background-color: #EFF8FE;border:1px solid #EFF8FE;border-radius:10px;padding:12px 20px;display: inline-block;">VIEW DEMO</a>
 </td>
</tr>