CODEWITHSUNDEEP
htmlcssfrontendemail-templates
iioannou
iioannou

Reputation: 161

How to disable the dark mode via email template

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 ?

Upvotes: 13

Views: 45064

Answers (5)

Maciek
Maciek

Reputation: 1972

For those who cannot use the above due to limitations in mailing applications like Mailchimp, I found a CSS solution. It's not pretty but it works.

Linear gradients seem to be skipped by dark mode (in Gmail at least).

To maintain the same background color (let say your background is #101010):

.background{
  background:linear-gradient(to right,#101010,#101010);
}

To maintain the same text color (let say your text is #101010):

.text{
  background:linear-gradient(to right,#101010,#101010);
  background-clip:text;
  color:transparent;
}

To make the text color effectively works, wrap the text in span to avoid any conflicts with other backgrounds.

<span class="text">My Text is Black</span>

Upvotes: 3

Bimal Subedi
Bimal Subedi

Reputation: 5

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.

Upvotes: -2

vlasterx
vlasterx

Reputation: 3856

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.

Upvotes: 14

Federico Moretti
Federico Moretti

Reputation: 584

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.

Upvotes: 2

Andreas Traganidas
Andreas Traganidas

Reputation: 513

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

Upvotes: 1

Related Questions