Dark Mode Email: Your Ultimate How-to Guide

Darkish Mode. The tech business began buzzing with these two phrases again when Apple added Darkish Mode to its desktop email client in 2018. The next 12 months, Dark Mode came to iOS Mail and different business heavyweights, together with Gmail, introduced help for Darkish Mode.

Litmus’ Email Client Market Share signifies that of the opens tracked, a median of 35% used Darkish Mode in 2022, representing regular adoption 12 months over 12 months.

Darkish Mode has solidified its rightful place within the inbox—however ensuring emails look nice on this studying atmosphere generally is a large problem for e mail entrepreneurs.

Think about this your all-in-one hub to all issues Darkish Mode, together with Darkish Mode code and hacks developed by Litmus and the e-mail group, and an inventory of useful Darkish Mode instruments e mail geeks belief and use usually.

Half 1: Final Information to Darkish Mode in E mail

What Darkish Mode is and why folks use it

Darkish mode is a darker coloration palette for low-light or nighttime environments. This reversed coloration scheme makes use of light-colored typography, UI components, and icons on darkish backgrounds—and it’s one of many hottest digital design trends lately. From Apple’s OS to apps like Twitter, Slack, or Fb Messenger, hottest working methods and apps now permit customers to change to Darkish Mode.

Darkish Mode is a scorching matter—and for good motive. Many individuals want Darkish Mode as a result of:

• It’s simpler on the eyes. Gentle textual content on a darkish background is significantly better for minimizing eye pressure, particularly in low-light conditions.
• It reduces display brightness, saving your battery life.
• It may well enhance content material legibility and may make it simpler for some customers to eat content material on desktop and cellular.

They might merely have a choice for darker interfaces.

How are purchasers making use of Darkish Mode to my emails?

In the intervening time, there seem like three essentially various kinds of coloration schemes that e mail purchasers use to use Darkish Mode to emails. Let’s take a look at them one after the other (or jump straight to the Dark Mode Email Client Support Chart).

No coloration modifications

Sure, you learn proper. Some e mail purchasers allow you to change their UI to Darkish Mode, however that doesn’t have any impression on how your HTML e mail is rendered. Whether or not the app is ready to Gentle or Darkish Mode, your e mail will look precisely the identical. Right here’s an inventory of these purchasers:

• Apple Mail*
• Gmail Desktop
• AOL
• Yahoo mail

*Doesn’t change coloration modes if you happen to pass over the Darkish Mode meta tags. In case you embody the Darkish Mode meta tags however don’t put any kinds in, they offer you a partial invert.

Try this e mail instance in Apple Mail: The design of the e-mail stays precisely the identical, irrespective of if you happen to view it at the hours of darkness or mild e mail consumer UI:

Apple Mail has a couple of exceptions to this: First, plain textual content emails do set off the applying of a Darkish Mode theme, and the minimal code that blocks Darkish Mode from making use of to a plain text email is a 2×1 picture—that is to make sure you can embody a 1×1 monitoring pixel whereas retaining a “plain textual content” really feel.

Secondly, In case you allow Darkish Mode as described beneath, then Apple Mail will auto convert your e mail to a Darkish Mode Model utilizing a partial invert (additionally described beneath).

Darkish Mode choices: default vs. customized

There are fairly a couple of e mail purchasers that may mechanically drive their default Darkish Mode onto your e mail if you happen to don’t do something in any respect. However if you happen to’re like most of us and also you’re not a fan of those Default kinds, you would possibly need to go along with the third possibility: design and code your individual Darkish Mode theme. Beneath, you may see a side-by-side of an e mail with a Gentle Mode theme, and a Customized Darkish Mode theme.

Earlier than we glance into tips on how to strategy a customized Darkish Mode theme although, let’s try how different e mail purchasers deal with their Default Darkish Modes.

Default Darkish Modes: partial coloration invert

The primary Darkish Mode theme is what I wish to name a “Partial Colour Invert”. It solely detects areas with mild backgrounds and inverts them so the sunshine backgrounds are darkish, whereas the darkish textual content turns into mild.

It typically leaves areas that have already got darkish backgrounds alone, leading to a totally Darkish Mode design. Luckily, most e mail purchasers that use this methodology additionally help Darkish Mode concentrating on, so you may override the client-default darkish theme.

Outlook.com is an e mail consumer that partially inverts colours, like you may see on this screenshot:

Default Darkish Modes: full coloration invert

The Full Colour Invert is essentially the most invasive coloration scheme: It not solely inverts the areas with mild backgrounds, however impacts darkish backgrounds as nicely.

So if you happen to already designed your emails to have a darkish theme, this scheme will mockingly drive them to grow to be mild. Sadly, that is at present the tactic utilized by a number of the extra in style e mail purchasers, akin to Gmail app (iOS), Outlook 2021 (Home windows), Workplace 365 (Home windows), and Home windows Mail.

Within the examples beneath, you may see the sunshine backgrounds have been transformed to darkish variations of the unique colours and areas that beforehand had a darkish background with mild textual content at the moment are mild with darkish textual content.

Not solely does this Full Colour Invert scheme most seriously change your e mail, however the e mail purchasers that use this logic additionally don’t permit Darkish Mode concentrating on in the mean time.

E mail purchasers are nonetheless determining tips on how to finest implement Darkish Mode and could also be open to suggestions from customers—particularly since not permitting e mail builders to focus on Darkish Mode with their very own kinds can have a destructive impression on legibility and accessibility.

Within the curiosity of advocating for higher Darkish Mode concentrating on help and fewer invasive Darkish Mode theming logic, you may communicate your thoughts directly to Gmail’s Accessibility team, and you too can contribute your screenshots of Gmail’s Dark Mode breaking your email.

Totally different Darkish Mode concentrating on strategies

As famous above, how e mail purchasers in Darkish Mode deal with your common HTML emails will differ. However what if you happen to’d like to use your individual Darkish Mode kinds that would very nicely differ from e mail purchasers’ default coloration schemes? There are two strategies you should utilize.

@media (prefers-color-scheme: darkish)

This methodology works in very a lot the identical method as making use of a block of kinds inside a @media question in your Cell Responsive view, besides this CSS block targets any person interface that’s set to Darkish Mode. @media (prefers-color-scheme: darkish) permits you to create essentially the most strong customized Darkish Mode themes the place you may implement something from Darkish Mode-specific picture swaps, hover results, background pictures… mainly virtually something you are able to do with conventional CSS! This methodology requires you so as to add Dark Mode meta tags and styles to the

of your e mail to be able to work in Apple Mail.

[data-ogsc]/[data-ogsb]

This can be a methodology first brought to our attention by Mark Robbins to focus on the Outlook app. Not each type works with it, nevertheless it does work for picture swapping on Outlook.com. Whereas it looks as if a fairly slender market share, it’s comparatively straightforward to easily duplicate the @media (prefers-color-scheme: darkish) kinds you already utilized and easily add the suitable [data-ogsc] prefixes to every CSS rule.

Which e mail purchasers help Darkish Mode?

These purchasers and apps at present supply Darkish Mode—both as a setting that the person can set manually or by mechanically detecting the person’s most well-liked coloration scheme:

Cell apps

Desktop purchasers

• Apple Mail
• Outlook 2021 (Mac OS)
• Outlook 2021 (Home windows)
• Office365 (MacOS)
• Office365 (Home windows)
• Home windows Mail

Internet purchasers

However simply because all these e mail purchasers supply a approach to set their UI to a darkish coloration scheme, that doesn’t imply that they deal with your emails the identical method. Email rendering is complex. An e mail that appears nice in a single consumer would possibly look damaged in one other. Now, Darkish Mode is including one other layer of complexity. As we’ve already proven, there are numerous methods a Darkish Mode e mail consumer would possibly cope with your code.

And there’s no constant help for the completely different concentrating on strategies both. So which e mail consumer follows which coloration scheme by default? Whereas some supply e mail designers no alternatives to focus on Darkish Mode to optimize the studying expertise, a number of e mail purchasers may be focused with both the @media (prefers-color-scheme: darkish) or [data-ogsc] strategies.

We’ve examined the Darkish Mode settings within the following e mail purchasers to see how they impression a daily e mail that doesn’t embody any Darkish Mode-specific concentrating on in addition to help for concentrating on Darkish Mode. Right here’s what we discovered…

E mail Darkish Mode e mail consumer help chart (as of October 2023)

**Forcing the background coloration to remain the identical coloration doesn’t have an effect on the font coloration and it’ll nonetheless invert. The one exception to this is able to be in purchasers that absolutely help @media or [data-ogsc]; or Gmail app the place the color blend fix works.

Gmail iOS & Outlook Home windows-specific concentrating on

Some #EmailGeeks on the market have developed sensible workarounds to manage a number of the Full Invert Default Themes we’ve been battling with. Every of those options are so thorough, they warrant their very own guides—so make sure you verify them out for a full rationalization!

Rémi Parmentier got here up with a tutorial on “Fixing Gmail’s Dark Mode issues with CSS Blend Modes” by combining mix-blend-mode and the Gmail hack from HowToTarget.email to retain your unique background and textual content colours for Gmail App iOS.

Nicole Merlin put her e mail wizardy to work in “How To Fix Outlook Dark Mode Problems”, crafting two strategies to focus on Outlook for Home windows’ Darkish Mode with MSO-specific gradient CSS properties and a very neat VML (Vector Markup Language) trick.

A phrase of warning when delving into these hacks, nonetheless: As a result of each of those strategies have the supposed impact of forcing the e-mail consumer to render the unique Gentle Mode textual content and/or background colours the place utilized, you run the chance of disrespecting your customers’ choice for Darkish Mode which matches towards the spirit of accessibility. Be certain to make use of these sparingly, like bettering the distinction ratio when the backgrounds or textual content convert to Darkish Mode in an unreadable method.

Although these concentrating on strategies are comparatively restricted compared to what you are able to do with the @media (prefers-color-scheme: darkish) or [data-ogsc] strategies, they’re nonetheless useful instruments to have in case it’s essential to repair issues with Darkish Mode breaking your textual content legibility.

Easy methods to design and code for Darkish Mode

When concentrating on Darkish Mode kinds throughout completely different e mail purchasers, make sure you comply with every of those six steps to enhance the Darkish Mode e mail expertise in your subscribers.

1. Optimize your logos and different pictures for all kinds

Add a translucent define to clear PNGs with darkish textual content for legibility in e mail purchasers the place Darkish Mode customization is extra restricted, like Gmail App and Outlook 2019 (Home windows).

This can assist forestall any points the place the e-mail consumer would possibly determine to make use of both the Partial Colour Invert or Full Colour Invert settings—and make issues simpler on the eyes in your subscribers. Choosing clear backgrounds wherever doable will assist with this.

You possibly can even have enjoyable with a Darkish Mode-optimized emblem!

Beneath is an instance of a faux emblem I made the place I not solely added a lightweight drop-shadow behind the textual content to make it stand out towards darkish backgrounds, however I additionally included a starry texture behind it to go well with the “NebulaCo” galaxy theme.

@media (prefers-color-scheme: darkish ) {   /* Reveals Darkish Mode-Solely Content material, Like Photographs */   .dark-img { show:block !necessary; width: auto !necessary; overflow: seen !necessary; float: none !necessary; max-height:inherit !necessary; max-width:inherit !necessary; line-height: auto !necessary; margin-top:0px !necessary; visibility:inherit !necessary; }       /* Hides Gentle Mode-Solely Content material, Like Photographs */   .light-img { show:none; show:none !necessary; }       /* Customized Darkish Mode Background Colour */   .darkmode { background-color: #272623 !necessary; }       /* Customized Darkish Mode Font Colours */   h1, h2, p, span, a, b { coloration: #ffffff !necessary; }       /* Customized Darkish Mode Textual content Hyperlink Colour */   .hyperlink { coloration: #91ADD4 !necessary; } } 

/* Reveals Darkish Mode-Solely Content material, Like Photographs */ [data-ogsc] .dark-img { show:block !necessary; width: auto !necessary; overflow: seen !necessary; float: none !necessary; max-height:inherit !necessary; max-width:inherit !necessary; line-height: auto !necessary; margin-top:0px !necessary; visibility:inherit !necessary; }   /* Hides Gentle Mode-Solely Content material, Like Photographs */ [data-ogsc] .light-img { show:none; show:none !necessary; }   /* Customized Darkish Mode Background Colour */ [data-ogsc] .darkmode { background-color: #272623 !necessary; }   /* Customized Darkish Mode Font Colours */ [data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { coloration: #ffffff !necessary; }   /* Customized Darkish Mode Textual content Hyperlink Colour */ [data-ogsc] .hyperlink { coloration: #91ADD4 !necessary; } 

6. ABT: At all times Be Testing!

As we at all times point out, email clients are constantly changing. Particularly with a function like Darkish Mode, tweaks to rendering logic are frequent. The one approach to be on high of all of it? Take a look at each e mail with a device like Litmus.

Make Add-to-Calendar hyperlinks a breeze with Litmus Personalize

In only a few clicks, you may create tailor-made subscriber experiences utilizing confirmed personalization techniques akin to add-to-calendar hyperlinks, stay polls, countdown timers and extra.

Darkish Mode picture optimization

How are you going to make your picture components look nice in Darkish Mode, too? Listed below are important suggestions and methods for optimizing your imagery.

Designing your elements

To your design elements, you may go along with a couple of stylistic choices:

To determine the most effective strategy, ask your self:

What issues most for this graphic—sustaining its unique feel and look or making certain it seems clear?

• If sustaining the feel and appear is essential: place the graphic on a background and flatten the picture for consistency.

• If transparency is the precedence: add a glow or stroke to make the graphic stand out in Darkish Mode.

Design strategies

Approach 1: Design with midtones

One strategy is to concentrate on midtones, whereas accounting for accessible distinction ratios.

When designing with midtones, use a coloration that has a excessive sufficient coloration distinction for each white and black as a result of it falls towards the center of the worth vary.

Approach 2: Use a glow or a stroke

A glow or strong white stroke round an icon or emblem may also assist with readability, nevertheless it will depend on the kind of picture or icon.

For clear PNGs with darkish textual content, including a translucent glow works nice.

Approach 3: Use a form define or background 

Not a fan of a glow results? You possibly can put your icon on a background so it not solely seems to be clear on Gentle Mode however nonetheless works in Darkish Mode the place picture swapping isn’t supported.

For stroke-based icons and illustrations, strive including a form define or background shapes behind them for a extra visually interesting look.

Utilizing APNGs

Relating to animated GIFs, go for APNGs. As an alternative of utilizing GIFs so as to add animation to your emails, strive utilizing Animated Moveable Community Graphics (APNGs).

GIFs don’t help transparency nicely:

White outlines can grow to be pixelated attributable to a restricted coloration vary. However, APNGs typically do help transparency and have a wider coloration vary.

Inquisitive about giving animated APNGs a strive? We cover that here. And provides Fable a strive in your subsequent APNG!

Respect person preferences relating to Darkish Mode

One of many largest advantages of Darkish Mode is its help with lowering eye pressure for folks in low-light situations or for different private causes. But it surely’s not a matter of Dark Mode vs. Light Mode. It’s a matter of what your subscribers need—whether or not that’s a darkish or a lightweight expertise. There’s no proper or unsuitable reply.

So, in case your subscribers are making the aware determination to view emails in Darkish Mode, it’s finest to respect that. Identical to you’d need to add ALT textual content in case your subscribers want to have pictures off by default, it’s best to construct emails that respect darker interfaces, too.

The Final Information to Darkish Mode was initially revealed on November 20, 2019 by Alice Li.

Darkish Mode and e mail accessibility

As talked about earlier, some e mail purchasers make Darkish Mode inherently inaccessible. Whereas many are engaged on bettering this, some don’t permit e mail builders to use their very own kinds. With out correct implementation, this could negatively impression readability and accessibility.

Let’s dive into what which means in follow.

Is Darkish Mode good or dangerous for accessibility?

Darkish Mode may be each useful and difficult for accessibility, relying on the person person and the way it’s applied.

Whereas it may possibly enhance readability for some, like people with cataracts, it may possibly additionally introduce accessibility points, together with these with color blindness or dyslexia. The secret is to supply a option to allow or disable Darkish Mode and guarantee correct coloration distinction in any mode.

Fixing e mail accessibility challenges in Darkish Mode

One main problem with Darkish Mode emails? There isn’t only one model (as mentioned earlier). A Darkish Mode e mail may be rendered in three alternative ways:

1. No coloration modifications: the e-mail stays the identical, whatever the UI setting.

2. Partial coloration invert: mild backgrounds are inverted to darkish.

3. Full coloration invert: each mild and darkish backgrounds could also be inverted.

This lack of standardization means you may’t absolutely management how your emails will seem to all subscribers. Nevertheless, you may take steps to enhance accessibility and readability.

Accessibility made easy

Creating accessible emails is not elective—it’s required. Find out about accessibility’s impression on manufacturers from two business specialists.

Watch now

Finest practices for designing accessible emails in Darkish Mode

• Guarantee excessive distinction ratios. Be certain your textual content stands out towards the background in each mild and darkish modes.

• Select accessible colours. Use coloration combos which can be straightforward to differentiate for folks with coloration blindness.

• Design with midtones for higher visibility. Use a palette of largely midtones to make sure distinction towards each mild and darkish backgrounds.

• Prioritize person selection. Enable subscribers to change between mild and darkish modes at any time when doable.

• Purpose to satisfy Internet Content material Accessibility Pointers (WCAG) requirements. At minimal, guarantee your colours meet WCAG Level AA compliance. To make sure your emails may be learn by all subscribers, intention for Level AAA.

• Use instruments like WebAIM’s Contrast Checker to guage coloration distinction.

• Keep away from skinny fonts. Gentle textual content on darkish backgrounds can impression readability, and through the use of a skinny font you may make it tougher for subscribers to learn your e mail. In case your model requires a skinny font, daring it in Darkish Mode for higher readability.

• Skip pure white on pure black: A #FFFFFF (white) background on #000000 (black) may cause eye pressure and may be mechanically inverted by some e mail purchasers.

• Take a look at your e mail renderings. Since Darkish Mode behaves otherwise in numerous e mail purchasers, preview your emails in a number of settings earlier than sending. Run a Litmus Test to see how your e mail renders throughout 100+ purchasers and gadgets.

• Use a device to preview your Darkish Mode emails as you construct them. See modifications in actual time, simply optimize on the go, and rapidly verify for visible accessibility points with the Dark Mode coding experience in Litmus Builder.

Create emails that everybody can expertise

Maximize your e mail’s impression by designing accessible content material for all. Accessibility checks are at all times at your fingertips with Litmus.

Build Accessible Emails

Half 2: Darkish Mode E mail Code Snippets for Builders

Easy methods to design and code for Darkish Mode emails

Beneath are 9 code snippets from the e-mail group to assist remedy your largest Darkish Mode challenges.

Darkish Mode meta tags

Goal Android/Outlook.com for Darkish Mode

Goal Apple/iOS for Darkish Mode

Override Darkish Mode background colours

Credit score: Annett Forcier. Grab the code in Litmus Community →

Preserve white textual content white in Gmail Darkish Mode

Credit score: Rémi Parmentier. Grab the code in Litmus Community →

Preserve textual content the identical coloration in Outlook’s Darkish Mode

Credit score: Nicole Merlin. Grab the code in Litmus Community →

Present/conceal pictures for Darkish Mode

Repair VML button background colours for Darkish Mode

Use off-white/off-dark colours to forestall coloration altering in Darkish Mode

Credit score: Ted Goas/Paul Airy. Grab the code in Litmus Community →

Half 3: Darkish Mode Instruments & Ideas

E mail Group Favourite E mail Darkish Mode Instruments & Ideas

What Darkish Mode finest practices, instruments and assets do your fellow #EmailGeeks depend on to study extra and overcome its challenges?

Try this ever-growing record of exterior sources the e-mail group recommends.

Is your favourite Darkish Mode device lacking from this record? Tell us by emailing in to [email protected]—we need to ensure this record is effective to all customers, and present.

1. To study Darkish Mode in ⚡AMP E mail

Darkish Mode help isn’t solely wanted for HTML emails, but additionally AMP-powered emails.

There’s some dangerous information: there’s at present no help for coding emails for Dark Mode in AMP e mail. Nevertheless, Benjamin Djang has found an alternate resolution to assist your AMP E mail look nice in mild and darkish mode. Here’s how.

2. Preserve your textual content content material as black textual content on a white background

“One easy factor that works nicely is to maintain your textual content content material as black textual content on a white background. It does imply some limitations in your design, however there’s nonetheless loads of alternative to get artistic across the exterior of the textual content and make issues look nice.”

Credit score to: Mark Robbins

3. Set base kinds for Darkish Mode, replace colours primarily based on design

Add these base kinds to your whole boilerplate e mail templates to make sure that each single certainly one of your emails will likely be Darkish Mode prepared, even if you happen to forgot to set Darkish Mode kinds up, explicitly.

darkbg { background-color: black !necessary; }  .h1 { coloration: white !necessary; } .h2 { coloration: white !necessary; } .button { background-color: white !necessary; coloration: black !necessary; } 

Half 4: The Darkish Mode Toolkit

Obtain Your Free E mail Darkish Mode Toolkit

We compiled our favourite Darkish Mode assets in our Darkish Mode Toolkit. Right here’s what you’ll get:

• The Final Information to Darkish Mode E mail, our complete information to every little thing it’s essential to find out about Darkish Mode
• A 1-hour recording displaying how a Darkish Mode e mail is coded in actual time
• Code snippets that can assist you add Darkish Mode help to your current emails
• And a Darkish Mode-ready template to get you began instantly

Obtain The Darkish Mode Toolkit and get began or stage up your Darkish Mode sport right this moment.

GET YOUR TOOLKIT