Outlook in darkmode messes with the css
Hi!
I have a emailTemplate that I want to have a light background. But Outlook in darkMode messes the css up. Sure there is a switch in outlook to "turn the ligths on" but I want to have white background all the time because everyone that gets the email will not know how to do that switch.
I have tried to add bgcolor to the table tag and the td tag and added backgroundColor to inline style, but without success.
I have also tried to force the button to have the same yellow color in darkmode, but it switches no matter what. I have also tried to search the internet but cant anything that covers outlook darkmode.
<table bgcolor="#ffffff" style="width:70%;" align="center" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td bgcolor="#ffffff">
Other answers here now no longer work as Outlook is adding !important inline such that changes in the
<style>section aren't able to override them anymore.However, you can still cheat by using a single colour gradient for background colours, and
-webkit-text-fill-colorfor text colours:<td style="background-color:#ffdd00;background-image: linear-gradient(#ffdd00,#ffdd00);"> <p style="color:#000000;font-weight:bold;text-align: center;-webkit-text-fill-color: #000000">This is a button</p>I wouldn't recommend using these on everything, as Gmail doesn't listen to it, and it's going against what your users want.
Outlook overrides your colours by either editing the inline style or if it's added with CSS they add an inline style.
So this
<p style="color: green">text</p>Becomes this
<p style="color: rgb(103, 202, 82);" data-ogsc="green">text</p>I've not yet found a way to prevent this from happening but you can override it by adding styles to your head.
Because they are only touching inline styling and not your
<style>block you can add something likep{color:green !important}which will override the added inline styles.It could end up being quite a lot of code doing it that way if you're using a lot of colours so may be best to only use it where the changes are really bad.
Hi!
I managed to override with !important
.lightTheme {
background: #ffffff !important;
color: #000 !important;
}
<body class="lightTheme">
<table class="lightTheme" style="width:70%;" align="center" border="0" cellspacing="0" cellpadding="0">
And it works!
But.... omg.. Win10 Mail don´t take these changes at all. It ends up the same, how is that? I thought Win10 Mail used the same rendered as outlook. Any thoughts on this?
For Outlook on Mac, this only works if you use background: #red !important; or background: #blue !important; but if you do background: #F7F4F1 !important; which I what I need, it doesn't work. Any help would be greatly appreciated, thank you!
Hello! I wrote an article about Outlook.com's dark mode earlier this year.
A way you can override Outlook.com dark styles is to add a class to the element you want and then use
!importantdeclarations.However, I'd really advise not to do this. If someone uses Outlook.com's dark mode, it's because they prefer it that way. They might know about the "Turn the lights on" button because it's presented by Outlook's interface when you activate dark mode the first time.
Hi Rémi!
Yes I read your article and implemented what you said there yesterday, awesome stuff!!
But the thing is that Windows 10 Mail in DarkMode ignore this, and still displays the email in dark.
My problem is not the dark theme it self, its that the button gets this wierd brown color, and I what it to be that yellow color my company has as it´s main color. Mabey I should just force the button color then. But the problem with Win10Mail still exists.
I've been using a combination of the new media query:
@media (prefers-color-scheme: dark) {
...your dark mode css here...
}
@media (prefers-color-scheme: light) {
...your light mode css here...
}
and
<!-- [if gte mso 9]>
<style>
...your outlook specific styles here...
</style>
<![endif] -->
It seemed to work for my setup! Hope this helps!