Therefore we decided to sprinkle eM Client with a bit of joy and created a brand new Christmas theme.

By continuing to browse the website, you are agreeing to our use of cookies.

Opting for transparent backgrounds wherever possible will help with this.

And other industry heavyweights, including Gmail, announced support for Dark Mode.

From Apples OS to apps like Twitter, Slack, or Facebook Messenger, most popular operating systems and apps now allow users to switch to Dark Mode.

Light text on a dark background is much better for minimizing eye strain, especially in low-light situations.

An email that looks great in one client might look broken in another.

In fact, there are various ways a Dark Mode email client might deal with your code.

Lets look at them one by one (or jump straight to the Dark Mode Email Client Support Chart ).

Some email clients let you change their UI to Dark Mode, but that doesnt have any impact on how your HTML email is rendered.

Whether the app is set to Light or Dark Mode, your email will look exactly the same.

Certain email clients will always render your Light Mode designs by default (unless you specifically add code to trigger Dark Mode, which Ill discuss later).

Or alternatively, you can use an off-white like fffffe instead.

But if youre like most of us and youre not a fan of these Default styles, you might want to go with the third option: design and code your own Dark Mode theme.

Below, you can see a side-by-side of an email with a Light Mode theme, and a Custom Dark Mode theme.

The first Dark Mode theme is what I like to call a Partial Color Invert.

It generally leaves areas that already have dark backgrounds alone, resulting in a fully Dark Mode design.

Fortunately, most email clients that use this method also support Dark Mode targeting, so you can override the client-default dark theme.

So if you already designed your emails to have a dark theme, this scheme will ironically force them to become light.

Unfortunately, this is currently the tactic used by some of the more popular email clients, such as Gmail app (iOS13) and Outlook 2019 (Windows).

And areas that previously had a dark background with light text are now light with dark text.

Em Client Theme How To Best Implement

Email clients are still figuring out how to best implement Dark Mode and may be open to feedback from usersespecially since not allowing developers to target Dark Mode with their own styles can have a negative impact on legibility and accessibility.

But what if youd like to apply your own Dark Mode styles that could very well differ from email clients default color schemes Here are two methods you can use.

While it seems like a pretty narrow market share, its relatively easy to simply duplicate the media (prefers-color-scheme: dark) styles you already applied and simply add the appropriate data-ogsc prefixes to each CSS rule.

So which email client follows which color scheme by default And while some email clientswere looking at you, Gmailoffer email designers no opportunities to target Dark Mode to optimize the reading experience, most clients can be targeted with either the media (prefers-color-scheme: dark) or data-ogsc methods.

Em Client Theme Full Color Invert

This will help prevent any issues where the email client might decide to use either the Partial Color Invert or Full Color Invert settingsand make things easier on the eyes for your subscribers.