Master the Art of Dark Mode Email Design and Coding

September 20, 2024

It’s a subject that’s been holding e-mail geeks up at night time for years now… Dark mode email design and improvement. As in case you didn’t have sufficient to cope with in the case of email rendering.

Darkish mode throws yet one more wrench within the gears of email development. Nevertheless, if you understand what you’re doing, you may optimize the inbox expertise for each gentle and darkish mode emails.

For those who’re ignoring darkish mode, it’s possible that a few of your subscribers are opening your HTML e-mail designs solely to seek out an unreadable mess. So, let’s shed some gentle on this shadowy topic and discover the best way to create emails that look nice, irrespective of the mode.

What’s darkish mode anyway?

Darkish mode is a show setting that may be turned on and off for a lot of gadgets, functions, and working programs. Primarily, it modifications the person interface in order that as a substitute of seeing the normal darkish textual content on a light-weight background, there’s gentle textual content on a darkish background.

So a background with hex code #FFFFFF and textual content shade hex code of #000000 switches.

In darkish mode, the background hex code turns into #000000 and the textual content hex code switches to #FFFFFF.

Right here’s how which may look when viewing an e-mail in gentle or darkish mode on a cellular system:

Darkish mode UI was the norm again within the ‘70s not lengthy after email was invented. Image these previous, boxy PCs with black screens and glowing inexperienced textual content. Mild mode ultimately turned the usual together with LCD screens within the ‘90s.

Twitter and YouTube had been among the many first common companies to supply darkish mode. In 2019, Microsoft, Google, and Apple adopted the pattern and commenced offerring darkish or “night time mode” choices for his or her applications and working programs.

In 2023, Twitter/X made the transfer to make its darkish mode UI the default. At first, Elon Musk stated it will be the solely choice. Apparently, he believes darkish mode is “better in every way.” However backlash from customers prompted the corporate to deliver again a light-weight mode setting for the platform.

As soon as Gmail, Apple Mail, and Outlook began providing darkish mode, e-mail entrepreneurs started paying consideration too. Right here’s how an previous Electronic mail on Acid e-newsletter appeared once we first began testing our personal stuff in darkish mode 4 years in the past. It’s not horrible. But it surely’s not superb both.

Why darkish mode issues in e-mail

Keep in mind when darkish mode was only a area of interest choice? These days are lengthy gone. Darkish mode has quickly grow to be a mainstream characteristic, with latest research exhibiting that a good portion of customers desire darkish mode for at the very least a few of their digital interactions.

In fact, these research on shopper utilization of darkish mode settings fluctuate. What you actually wish to know is how most of the contacts on your record are opening messages in darkish mode. Advanced Email Analytics from Sinch Electronic mail on Acid allow you to do precisely that. Discover out extra about tracking dark mode opens on our platform.

However we digress… Why do individuals love darkish mode a lot? Let’s break it down:

1. Eye consolation: Many customers discover darkish mode simpler on the eyes, particularly in low-light circumstances. This may be notably useful for individuals who verify their emails late at night time or very first thing within the morning.
2. Decreased blue gentle exposure: Some research recommend that decreasing publicity to blue gentle, particularly within the night, may also help with sleep patterns. Darkish mode is a technique customers attempt to obtain this.
3. Battery life: For gadgets with OLED screens, darkish mode can considerably lengthen battery life. It’s because OLED screens can flip off particular person pixels when displaying black, consuming much less energy.
4. Aesthetic choice: Let’s face it, some individuals simply assume darkish mode appears cool. It may give a modern, fashionable really feel to interfaces.
5. Decreased display glare: In sure lighting circumstances, darkish mode may also help scale back display glare, making it simpler to learn content material.

Regardless of the motive, there’s a great probability a good portion of your subscribers are viewing your emails in darkish mode. As e-mail professionals, it’s our job to make sure our messages look nice in each gentle and darkish environments.

The challenges of darkish mode emails

Earlier than we bounce into options, let’s break down the principle challenges of darkish mode emails. Understanding these hurdles is step one in overcoming them:

Colour inversion in darkish mode: When your design flips

One of many main challenges with darkish mode is shade inversion. Many e-mail purchasers routinely invert colours when switching to darkish mode, turning gentle backgrounds darkish and darkish textual content gentle. Whereas this sounds easy in idea, in observe it may possibly result in some surprising outcomes:

• Your fastidiously chosen shade scheme could be utterly altered, affecting the general appear and feel of your e-mail.
• Essential design parts, like buttons or call-to-action areas, would possibly lose their influence or grow to be tough to differentiate.
• Delicate shade variations that labored nicely in gentle mode would possibly grow to be indistinguishable in darkish mode.

On this instance, purple could also be a main model shade you employ for calls-to-action in emails. However the inverted inexperienced button could not suit your model in any respect.

Model consistency in darkish mode: Emblem visibility points

Your model’s visible id is essential in e-mail advertising and marketing. Nevertheless, darkish mode can mess up your email branding efforts:

• Logos designed to face out on a light-weight background would possibly out of the blue grow to be invisible on a darkish background.
• Model colours fastidiously chosen for gentle backgrounds would possibly conflict or grow to be unreadable when inverted.
• The general “really feel” of your e-mail would possibly shift dramatically, probably disconnecting it out of your model’s traditional aesthetic.

Right here’s what can occur in case your brand isn’t optimized for viewing emails in darkish mode:

For a bunch of choices on the best way to deal with this, try our tips about fixing dark mode logo problems.

Accessibility and darkish mode: Surprising distinction points

Whereas darkish mode can profit some customers with visible impairments, it may possibly additionally create surprising email accessibility points:

• Colour contrasts that labored completely in gentle mode would possibly grow to be problematic in darkish mode.
• Textual content that was simply readable on a light-weight background would possibly grow to be strained on a darkish background, particularly if the font weight isn’t adjusted.
• Essential visible cues or separators would possibly disappear or grow to be much less noticeable in darkish mode.

Electronic mail purchasers and darkish mode rendering

Like traditional on the earth of e-mail improvement, it’s by no means so simple as having a darkish mode and non-dark mode, all e-mail purchasers that characteristic darkish mode will deal with it barely in another way.

As defined on this excellent article from our friends at Parcel, you may break down the completely different darkish modes to 3 completely different modes; full inversion, partial inversion and no change.

Full inversion will change each your font colours and your backgrounds, partial inversion may be very related however will largely depart your backgrounds untouched, no change gained’t inverse any of your content material.

Apple Mail and darkish mode

Gmail and darkish mode

For those who’re combating Gmail on iOS darkish mode, you may strive this insanely clever solution by Rémi Parmentier, using blends (which are supported in Gmail) to manage how your e-mail appears when darkish mode has its manner.

Outlook and darkish mode

For those who’re struggling to get textual content readable in Outlook, Nicole Merlin has an amazing guide on tackling font colors in Outlook’s Dark Mode, includin

Illuminating options for darkish mode emails

Now that we’ve outlined the challenges, let’s dive into some methods that will help you navigate the murky waters of darkish mode e-mail design:

Setting the stage for darkish mode: Meta tags and CSS

Step one in creating darkish mode-friendly emails is to inform e-mail purchasers that your e-mail helps each gentle and darkish modes. You are able to do this by including particular meta tags to the

part of your e-mail:

These meta tags primarily say, “Hey, e-mail shopper! This e-mail is designed to work in each gentle and darkish modes.”

To enrich these meta tags, you must also embrace the next in your CSS:

This CSS reinforces the message that your e-mail helps each shade schemes.

Detecting and adapting to darkish mode: Media queries

When you’ve set the stage, you may use CSS media queries to detect when darkish mode is lively and regulate your kinds accordingly. Right here’s an instance:

                            

                                @media (prefers-color-scheme: darkish) {
  physique {
    background-color: #1a1a1a !essential;
    shade: #ffffff !essential;
  }
  h1, h2, h3, p {
    shade: #f1f1f1 !essential;
  }
}
                            
                        

This media question says, “If darkish mode is on, use these colours as a substitute.” It’s a robust software that means that you can create a tailor-made darkish mode expertise.

Nevertheless, it’s essential to notice that not all e-mail purchasers assist this characteristic. It really works nice in e-mail purchasers that assist media queries, like Apple Mail and Outlook for Mac. However some purchasers, like Gmail, don’t assist this characteristic, so that you’ll must have fallback choices.

Making your brand seen in darkish mode: Picture swapping strategies

Your brand is a vital a part of your model id. So, making certain it’s seen in each gentle and darkish mode is important. Listed below are some methods:

• Use clear PNGs: This could work nicely, however be cautious of darkish textual content or parts disappearing towards a darkish background.
• Add a light-weight define or glow: This may also help your brand stand out in each modes however make certain it doesn’t have an effect on the emblem’s look in gentle mode.
• Create a darkish mode model of your brand: That is usually the very best resolution. You should utilize picture swapping strategies to indicate completely different variations based mostly on the mode.

Right here’s how the code would possibly look if we wished to show completely different logos in darkish and light-weight mode:

CSS:

                            

                                @media (prefers-color-scheme:darkish) {
    .dark-mode-hide{
        show:none!essential;
    }
    .dark-mode-show{
        show:block!essential;
    }
} 
                            
                        

HTML

Be aware: the code below is Microsoft Workplace conditional code that tells Outlook to disregard the darkish mode brand. With Outlook,  you can too use the tag “mso-hide:all” to maintain parts hidden in darkish or gentle modes.

This code tells e-mail purchasers to make use of the darkish mode brand when darkish mode is lively, and the sunshine mode brand when it’s not. You should utilize this identical approach for different essential graphics in your e-mail design.

In fact, there are easier options, just like the glow or define trick.

Right here’s how the Sinch Electronic mail on Acid brand would show in darkish mode with a white stroke that outlines textual content and fills in gaps (Be aware: Graphic designers usually hate this method):

Optimizing photos for darkish mode emails

Pictures play an important function in lots of e-mail campaigns, however they are often tough to deal with in darkish mode. Listed below are some suggestions, lots of that are much like dealing with darkish mode logos:

• Use clear backgrounds: This enables your photos to mix seamlessly with each gentle and darkish backgrounds. In any other case, you possibly can get an unpleasant white background round photos in darkish mode.
• Add a delicate define: For photos which may get misplaced on a darkish background, contemplate including a light-weight define.
• Create darkish mode variations: For key photos, you would possibly wish to create darkish mode-specific variations and use the picture swapping approach we mentioned for logos.

Guaranteeing accessibility in darkish mode emails

Electronic mail accessibility ought to at all times be a precedence in your design selections, and darkish mode provides an additional layer to contemplate:

• Verify distinction ratios: Use instruments to make sure your textual content meets WCAG tips for distinction in each gentle and darkish modes.
• Use enough font sizes: Smaller textual content will be more durable to learn in darkish mode, so err on the aspect of bigger, clearer fonts.
• Don’t rely solely on shade: Use different visible cues (like icons or underlines) to convey info, not simply shade variations.
• Check with display readers: Guarantee your darkish mode optimizations don’t intrude with display reader performance.

Dealing with darkish mode throughout completely different e-mail purchasers

Given the inconsistent implementation of darkish mode throughout e-mail purchasers, it’s essential to have a method:

• Design for the bottom frequent denominator: Guarantee your e-mail appears good in purchasers that don’t assist darkish mode or superior CSS.
• Use progressive enhancement: Layer on darkish mode optimizations for purchasers that assist them.
• Check extensively: Use instruments like Sinch Electronic mail on Acid to preview your e-mail throughout completely different purchasers and modes.
• Have fallback choices: For parts essential to your message, contemplate offering options that work in all eventualities.

Greatest practices for darkish mode e-mail design

Now that we’ve lined the technical facets, let’s take a look at some general finest practices for designing darkish mode emails:

• Begin with darkish mode in thoughts: Don’t deal with darkish mode as an afterthought. Take into account it from the start of your design course of. You probably have an email design system, darkish mode ought to be a part of it.
• Use a darkish mode shade palette: Develop a set of colours that work nicely in darkish mode and align along with your model.
• Keep away from pure black backgrounds: Very darkish greys are sometimes simpler on the eyes than pure black.
• Watch out with shadows: Shadows that look nice in gentle mode would possibly disappear in darkish mode.
• Check, check, check: All the time preview your emails in each gentle and darkish mode throughout numerous purchasers and gadgets.

Testing: The important thing to darkish mode e-mail success

Right here’s the place we placed on our problem-solving hat. Testing your emails in darkish mode throughout completely different purchasers is essential. That’s the place Sinch Electronic mail on Acid is useful. Our email quality assurance platform helps you to test and preview your emails in darkish mode throughout numerous purchasers and gadgets, serving to you catch rendering points earlier than they attain your subscribers.

With Sinch Electronic mail on Acid, you may:

• Preview your e-mail in each gentle and darkish mode
• Check throughout a number of email clients and gadgets
• Determine and repair rendering points rapidly
• Guarantee your emails look nice for all subscribers, no matter their mode choice

Plus, monitor darkish mode e-mail opens in with our analytics so you may see precisely why optimizing for darkish and light-weight mode is well worth the effort.

Don’t be afraid of the darkish (mode)

Darkish mode in e-mail doesn’t should be a headache. With the following pointers, strategies, and testing methods, you may create emails that look nice whether or not your subscribers desire the sunshine aspect or the darkish aspect.

Keep in mind, the important thing to mastering darkish mode emails is thorough testing and a willingness to adapt your design course of. By contemplating darkish mode from the beginning, utilizing the correct instruments and strategies, and testing totally, you may guarantee your emails shine in any setting.

So go forward, e-mail execs! Embrace the challenge of dark mode and create emails that look unbelievable irrespective of how they’re considered. And when doubtful, try it out with Sinch Electronic mail on Acid. Your subscribers (and your peace of thoughts) will thanks.