6

Is there a way to disable the dark mode in outlook.com and force the original styles of my email template to render as displayed on light/normal mode ?

iioannou
  • 81
  • 1
  • 1
  • 8

4 Answers4

3

First of all you can not disable a style (dark or light) via css.

What you can do in theory is use media queries (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) to detect whether light or dark mode is used and apply css rules respectively.

However since you are refering to an email template as far as i know there is no support to media queries, so the short answer is No :(

Andreas Traganidas
  • 497
  • 1
  • 6
  • 13
3

There is a way to disable dark mode in your email templates. You need to add these two meta tags to your HTML:

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

New browsers that recognize dark mode will be able to use this, so the email will appear as it used to before. There shouldn't be any automatic style overwrites in this manner.

If you want to add dark mode, to overwrite your light mode styles, you add them like this, which I recommend:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
}
</style>

Your inline stiles will remain, but again, newer email clients will be able to recognize style and media sections. Older email clients will ignore it.

Vladimir Jovanović
  • 3,288
  • 1
  • 20
  • 27
  • 1
    This does not work for me in Outlook – little tiny man Apr 21 '22 at 00:12
  • Outlook was always outdated when it comes to latest web standards and CSS support. You should always check the appropriate resources and guides to see what's possible with specific email client. Always create a solid solution that works across most clients and then use features like this one to enhance the experience, if supported. – Vladimir Jovanović Apr 28 '22 at 12:10
  • It does not work with Gmail – Khalil Jun 19 '23 at 20:48
  • @Khalil Email clients are at least a decade behind browsers and every email client behaves differently. Go to https://www.campaignmonitor.com/resources/guides/dark-mode-in-email/ and see the problems with this across different browsers. – Vladimir Jovanović Jun 20 '23 at 13:48
2

Outlook has a unique behavior for the dark mode support on e-mail. You can learn more here, if you want. Anyway, it uses [data-ogsc] to control which theme to display: you can also use the media queries to force your template to be displayed on both light/dark theme preferences. Just copy and paste your rules in @media screen and (prefers-color-scheme: dark); as I said, Outlook asks for a [data-ogsc] .darkmode selector to do the same. So, once you created your light default template, paste it in those brackets and it should work on most webmail, Outlook included.

Federico Moretti
  • 527
  • 1
  • 11
  • 22
0

You can simply ignore the dark mode in emails by adding a image anywhere in the email. This had helped me to solve this problem. Hope that your problem will also be solved from this.

Bimal Subedi
  • 9
  • 1
  • The problem is that the images containg the texts are inaccessible to people with visual disability. :-( – Oo'- Jul 19 '23 at 08:42