Override Outlook Dark Mode Button Background

June 25, 2024 Post a Comment

I am trying to add support for dark mode to my email templates, however am having an issue when it comes to Outlook. For some reason Outlook is partially overriding the background

Solution 1:

The bad news is that we cannot specifically target Dark Mode via CSS in email via @media query or generated class name for Gmail or Outlook. Gmail replaces color values in the sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the sheet.

Solution

Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.

Good luck.

Solution 2:

Image 1x1px background + color = bulletproof button color: <a href="https://ilovecode.com" width:auto;font-family:Roboto, arial, sans-serif;font-size:16px;color:#ffffff;border-style:solid;border-color:#59BC2B;border-width:10px 20px;display:inline-block;background-color:#59BC2B;background-image:url(https://path-to-the-1px-image.png);text-align:center;text-decoration:none;">GO!

Solution 3:

Outlook.com and Outlook (Windows/Mac/Android/iOS) will invert/adjust most colours, but for some reason they don't adjust border colours, which is why your <a> tag's borders are the original colour, but the background-color of the <a> has been adjusted for dark mode. Try using border-color: transparent;.

Solution 4:

Which Outlook? (Outlook desktop for Windows, 2007-19? Outlook desktop for Mac? Outlook on Android? iOS? Outlook.com/365 webmail?)

You may be able to try this trick, courtesy of Rémi Parmentier (I say 'may' because I don't have the code for your button):

<astyle="color:blue;"><spanclass="dark-mode-red">…</span></a>

And this in your <head> section:

<metaname="color-scheme"content="light dark"><metaname="supported-color-schemes"content="light dark"><styletype="text/css">@media (prefers-color-scheme: dark) {
  .dark-mode-red {color:red !important}
}
</style>

Thus, remove background-image: linear-gradient(#13c2c2, #13c2c2) !important; from your inline section (anything inline will get translated), and attach that to the @media dark mode style.

This is a full working example (although Outlook Office 365 Windows shows black text):

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"xml:lang="en"xmlns="http://www.w3.org/1999/xhtml"xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office"><head><metaname="color-scheme"content="light dark"><metaname="supported-color-schemes"content="light dark"><styletype="text/css">@media (prefers-color-scheme: dark) {
  .darkbutton {
    color:#ffffff!important;
      background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}

</style></head><body><tdalign="center"style="word-break: break-word; font-family:  Helvetica, Arial, sans-serif; font-size: 16px;"><ahref="https://www.google.com"class="darkbutton"target="_blank"style="color: #ffffff; border-color: #13c2c2; border-style: solid; border-width: 10px 18px; background-color: #13c2c2 ; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); -webkit-text-size-adjust: none; box-sizing: border-box;">Reset your password</a></td></body></html>

Solution 5:

Well, it's not entirely true that you cannot change the background-color to what is set for the border. You actually can change that to tackle this hellish issue in Outlook. Sometimes though, and this case is one of those 'sometimes'.

You use background-image already and that is indeed the way to go. Replace the linear-gradient by a 1x1 pixel .png file that exactly contains that border-colour and repeat that. That color will not be inverted - it's an image after all. For the sake of compatibility, you could try to apply background="file here" as an attribute. It will repeat infinitely, but it's exactly what we want. The color will, however, remain white, unless you make that entire button a separate image.

Html5 Lite