Override Outlook dark mode button background

Question

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 of my button which is causing it to display incorrectly:

The HTML for the button is as follows:

<td align="center" style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">
  <a href="{{action_url}}" class="f-fallback button" target="_blank" style="color: #fff; border-color: #13c2c2; border-style: solid; border-width: 10px 18px; background-color: #13c2c2 !important; background-image: linear-gradient(#13c2c2, #13c2c2) !important; 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>

The button has the following inline style (formatted for your convenince):

color: #fff;
border-color: #13c2c2;
border-style: solid;
border-width: 10px 18px;
background-color: #13c2c2 !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;
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;

Additionally, I've already added the following to the <head> section of my email.

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

Thanks!

It looks like the button is fine, but the text inside the button could be the problem. Is the text contained in something else than ``? — tamarin, May 07 '20 at 13:11
@tamarin It looks like regardless of what styling I add Outlook still overrides it. Even `!important` doesn't seem to help. — oreid, May 09 '20 at 05:05
***!important* hack Deprecated for Outlook.com** Edit on 10/15/2019: Microsoft changed their implementation of dark mode earlier this year and now adds inline !important to all the styles they edit. It’s no longer possible to override Outlook.com’s dark mode styles. — Larry DaBig Meech, Oct 29 '20 at 12:44

score 6 · Accepted Answer · answered May 07 '20 at 17:38

6

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.

answered May 07 '20 at 17:38

gwally

3,349
2
14
28

Hey, thanks for the reply! That's a shame to hear. I have read a couple of sources that seem to suggest that you can using some of the `@media` query selectors to style dark mode, but as you say, it doesn't seem to be very widely supported. I'll let you know if I make any progress. Cheers! – oreid May 09 '20 at 05:04
2

@beardo There is a meta tag you can use for Apple / IOS: `` At this time, it does not work for Gmail or Outlook. – gwally May 09 '20 at 19:10
Ugh ... thank you, Microsoft, for changing company colors with no way to prevent it where it hurts. – Otto Abnormalverbraucher Oct 08 '21 at 15:51
Thanks for answer! Is there any documentation, or any mention about this? – Mega Proger Sep 26 '22 at 08:58

Nicole Merlin · Answer 2 · 2021-07-27T05:52:22.983

2

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

edited Jul 27 '21 at 05:52

answered Oct 07 '20 at 01:48

Nicole Merlin

196
1
5

score 2 · Answer 3 · answered Mar 31 '21 at 22:46

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!

Nathan · Answer 4 · 2020-05-12T01:18:00.383

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):

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

And this in your <head> section:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark"> 
<style type="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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="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>
    <meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark"> 
<style type="text/css">

@media (prefers-color-scheme: dark) {
  .darkbutton {
    color:#ffffff !important;
      background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}

</style>


</head>
<body>
    <td align="center" style="word-break: break-word; font-family:  Helvetica, Arial, sans-serif; font-size: 16px;">
  <a href="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>

Nathan, thank you for your input! I've updated my question to include the HTML and CSS I am using for my button. I've also included the tags I am using in my `` tag. If I understand your suggestion correctly, won't setting the `color` attribute change the text colour instead? Additionally, it doesn't seem that adding `@media (prefers-color-scheme: dark)` with specific styling for my button seemed to help (including the `data-ogsb` specific tags). — oreid, May 11 '20 at 12:07
@beardo Sorry the code wasn't tested-- here it is working well, and also having support for Apple's dark modes. — Nathan, May 12 '20 at 01:18
@Nathan on 10/15/2019 Remi said Microsoft changed their implementation of dark mode earlier this year and now adds inline !important to all the styles they edit. Is this something new? — gwally, May 12 '20 at 17:59
@gwally Yes that's true. But if you don't mention a color inline, it won't change it. So this is a hack to get around that (notice in the `` I did not put the linear-gradient, so that it wouldn't be overridden). By abstracting it to the class, the system won't inline !important it, and thus we can override it in the ` — Nathan, May 12 '20 at 22:47
This doesn't appear to be true anymore. I have a background color set in 10 different ways with important flags. Outlook overrides and inverts background colors despite every hack listed on the internet. — HackSlash, May 16 '23 at 19:26
One of the Outlooks, I think it's Windows Mail, requires a class with mso conditional style that is `background-color: transparent !important`. @HackSlash — Nathan, May 16 '23 at 23:10

score 0 · Answer 5 · answered May 28 '20 at 21:10

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.

score -1 · Answer 6 · edited Aug 25 '20 at 03:47

-1

Take out the background-color element on your a tag. You already have the

background-image:linear-gradient(#13c2c2, #13c2c2)

and that's all you need.

edited Aug 25 '20 at 03:47

Jared Forth

1,577
6
17
32

answered Aug 24 '20 at 23:50

Tara D

1

Override Outlook dark mode button background

6 Answers6

Linked