Email Marketing

14 Brilliant Ways To Nail Dark Mode Email In eCommerce (w/ Examples)

October 28, 2024

14 Brilliant Ways To Nail Dark Mode Email In eCommerce (w/ Examples)

Enabling dark mode in emails helps users scan way faster than they usually do – while increasing the perceived ease of use. However, do you actually need to write complicated code, just to enable dark mode in your emails?

That is exactly what this article covers – we start with:

▶ How to get dark-mode email right for your eCommerce brand (14 awesome ideas+ examples)

▶ Common challenges in creating dark-mode emails

Let’s go! 😉

Dark Mode Email for eCommerce: 14 Awesome Ideas (+ Examples)

1. Create separate dark-mode email templates

The steps here are pretty straightforward – all you need to do is:

Use an “email address contains text” filter to build segments out of the most used email clients
Check the segment size to figure out which is the most used email client
Build separate email templates by the type of email client

Here's why you should do it:

Segments are dynamic – meaning any new addresses will get automatically added to a segment and thus trigger workflows using optimized dark-mode email templates.

The goal is to create a segment by running a filter that checks the text in the email addresses. For example, you can use text filters “@gmail.com”, “@yahoo.com”, and “icloud.com.”

This method will ultimately result in the creation of two distinct email templates:

👉 Dark mode email template for clients that support code changes

👉 Universal dark mode email template irrespective of whether the email client supports code or not

Pro Tip: This is by far the easiest way to segment your emails – but still may have some errors, as some users may use different apps to access their emails.

Also read: 13 Triggered Email Examples That Actually Drive Conversions

2. Let the email client know (optional)

This method involves adding a bit of metadata to your email templates via the head tags – which lets the email client know that the email is ready to handle dark mode as well as light mode.

This is an example of the code you need to add between the <head> tags of your email:

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

However, this step is strictly optional – as some email clients will go ahead and switch colors on their own.

Pro Tip: Using meta tags to declare dark mode in your emails is optional – if you do use one, make sure you’re using code that your target email client supports – which leads us to the next point.

3. Add CSS to your email style tags

This method is optional for universal dark mode email templates – but a ‘must-do’ for dark mode email templates targeting email clients that support @media queries – like Apple Mail (“icloud.com”, “me.com” or “@mac.com”), Samsung mail, and others.

The goal here is to use the “Prefers-color-scheme: dark” media query and create CSS classes to set dark-mode-specific behavior – here’s an example of a CSS override to switch between logos on dark mode:

HTML:

<table>

<tr>

<td>

<img src="yournormallogo.png” alt="light mode logo” class="normallogo">

<div class="lightlogo" style="visibility: hidden; width: 0;”>

<img src="yourlogofordarkmode.png” alt="dark mode logo” class="darkmodelogo” style="visibility: hidden; width: 0;”>

</div>

</td>

</tr>

</table>

CSS:

<style>

@media(prefers-color-scheme: dark)

{

.normallogo {display: none !important;}

.darkmodelogo {display: block!important; width: 100px !important;}

}

</style>

Pro Tip: Add styling elements like line height, padding, and borders to further enrich the styling. However, make sure you assign unique style classes for each element – for example, it’s best not to use the same CSS class for text as well as images.

4. Use gradient backgrounds

This step is especially useful for all types of dark-mode email templates. The goal here is to use a gradient of two colors as the background of the tables in your email – so your logos pop out, even if the background changes color.

Additionally, you can also use the CSS property “mix-blend-mode” and set it to ‘hard-light’ – here’s an example you can use for creating dark mode emails:

HTML:

<table border="0" cellpadding=50px" cellspacing="0" width="100%">

<tr>

<td style="background: linear-gradient(#000000, #f87d65); text-align: center;"> <p style="color: #ffffff; text-align: center">This is your white text!</p><img src="yourlogo.png" alt="Logo" style="mix-blend-mode: hard-light; width: 200px;"> </td>

</tr>

</table>

Output with reversed colors:

Output of gradient background HTML code for dark mode in emails

Pro Tip: You can also use partially opaque photos to blend with your background. Check this dark mode email example from Pair with a partially transparent logo – but Gmail automatically changes the color to adjust for dark mode:

Also read: eCommerce Email Design: 25 Beautiful Examples (& Why They Drive Sales)

5. Use only two colors in your icons/logos

The reason behind this is so your logos/icons don’t get lost in the background when the email client automatically changes the background color. A great alternative to transparent backgrounds, this dark mode email hack targets email clients that change colors and images (partially and fully) in dark mode.

The idea is to use two colors – one that matches the background of the email – and another that builds contrast against the background color.

Here are two examples from De La Calle:

Pro Tip: Avoid this technique when creating hero images or product images within your email. Here’s why: if the email client switches out the primary background color, your images may end up completely off-brand.

Also read: Our Favorite Hero Image Examples in eCommerce (2024)

6. Use colors that stand out in both dark and light mode

Want to ensure your email colors don't switch? Use colors that work against dark and light backgrounds – here are two instances of this technique in action within this example from Tenways.

Tenways features shades of electric blue and teal colors, and both of these shades retain colors against both light and dark backgrounds. Meanwhile, the light gray color blends in with the light mode version and creates a unique section within the dark mode version:

Dark mode email example from Tenways featuring colors that won't switch colors when emails switch to dark mode

Pro Tip: Maintain a hierarchy of colors in your emails – darker colors should always go at the back, with the lightest on top. For example, if your background is #ffffff, use #545454 (not pure black, but close to it) – use #f1f1f1 (similar to white but of a slightly darker and different shade) on top of that. These colors aren’t usually targeted by other email clients – which helps ensure that these colors don’t switch.

7. Give your logo an outline

Doing this ensures that your logos stand out no matter what – all you have to do is add an outline to your logos/social icons – here are two examples from Buoy and Remarkable:

Pro Tip: Avoid using CSS to generate outlines for your images – instead, it's better to use photo editing software to create an outline.

8. Limit HTML text

Most email clients don’t switch colors on larger images – which helps ensure that the sanctity of the email is retained. However, what you should always keep in mind is that your colors should never be muted:

Dark mode email example from Pacsun showing how using images as hero headers will reduce color switching in dark mode.

Pro Tip: Use your email’s full width to create a background for your logos – instead of a square block on which your logo rests.

Also read: eCommerce Email Mobile Optimization: 35 Guidelines For Store Owners

9. Use clean padding across blocks

When colors switch, important elements like dividers and spacers may change colors – making your entire email look inconsistent.

The way out: reduce padding between cells and other elements – or at the very least, maintain consistency.

Check how one section from this Act and Acre’s email adapts wonderfully – however, the other does not – all because of inconsistent padding and image alignment:

Dark mode email example from Act and Acre showing consistent padding between sections help reduce visual inconsistencies in a email's dark mode.

Pro Tip: If you use HTML padding, add color to it – use a close but different shade to the email’s background – this will ensure your colors don't switch as the email client optimizes for dark mode (Act and Acre does this too with the 'Email Us', 'Text Us' and 'Live Chat' blocks).

10. Use borders wisely

Adding a border via HTML is one of the biggest dark-mode email best practices – especially if you use inverted colors. For example: a black border against a white background and vice versa.

The goal is to leverage predictability – as pure white and black will get switched. Here’s a brilliant example of this in action from Bern Helmets:

Pro Tip: Add shapes to your padding through border-radius – this will ensure your sections look clean – which leads us to our next point.

11. Use transparent colors and images

Transparent images and colors are ideal for dark mode emails – check how this example from UGG features CTA buttons and product images to create a beautifully optimized dark mode email, all with transparent images and colors:

Dark mode email example from UGG showing transparent images and CTA buttons.

Pro Tip: Upload all product photos with a slight glow around the edges of the product, ensuring the images stand out automatically, even in dark mode.

Also read: 19 Creative Ways to Display eCommerce Products (w/ Brilliant Examples)

12. Reduce extra colors

Bringing in your brand colors through backgrounds and dividers made of different colors will add extra unpredictability to your email – which is why it's a much easier idea to simplify as Gus does:

Dark mode email example from Gus showing how reduced elements in an email help create clean dark mode emails.

Pro Tip: It's best not to use text over images, as it may cause low readability – instead try using separate table cells for text and images – check this example:

Dark mode email example from Gus showing images and text should not be used on top of each other, and instead used separately

13. Design your alt text smartly

The idea is to maintain your email’s readability when the email client switches to dark mode and the images are blocked. Here's what you need to do – apart from using background colors on table rows and cells, add CSS to your images to ensure that the alt text appears with padding and colors. This helps build contrast against the background color of the table cells:

Dark mode email example from Rumpl, showing design on Alt Text with padding and colors

Pro Tip: You can also skip declaring colors in your HTML – however, for links you can set a little surprise color with the ‘: hover’ CSS attribute.

Also read: 13 Proven Ways to Reduce Email Unsubscribe Rate (eCommerce)

14. Try out dark mode

This is the most important and the least tried-out step to get dark mode emails right. All you need to do is:

Sign up for a few popular email clients (Yahoo, AOL)
Use a few different apps on multiple devices (Android, iOS, Webmail, Windows app, etc)
Send out the base dark mode email templates with some content

Your goal here is to A/B test different elements across different email clients and devices – here are some ideas:

✅ Transparent images vs. images with backgrounds

✅ CTA buttons with a border vs. without borders

✅ Logos with padding vs. without padding

✅ Logos with an outline vs. with a glowing outline

✅ Backgrounds with one color vs. multiple colors

✅ Social icons with dual colors vs. single-color

Set out a base template and send it across all the possible combinations of email clients and devices. The goal is to look for inconsistencies in terms of branding, dividers, and readability.

Pro Tip: Try using low screen brightness when testing emails in dark mode – this will help you understand what colors don’t read as well on low brightness. For further ideas on this, always refer to the Web Content Accessibility Guidelines (WCAG) when setting colors – the aim should be to use high contrast (if needed, use a color contrast checker tool).

Also read: Email A/B Testing: Elements to Test + Mistakes to Avoid

Challenges in Creating a Dark Mode Email

Dark mode doesn’t work the same way in every email client. It may be the most common challenge, but not the biggest one by any margin. This is why we’ve ranked the challenges by severity – we start with the biggest challenge in creating eCommerce dark mode emails:

1. Targeting the wrong email client and device

Optimizing your email for dark mode on Outlook? Consider this: most eCommerce consumers use their personal email when signing up for an average eCommerce brand’s email (unless the brand caters to bulk purchases or b2b transactions). Think of it like this: would you be willing to give away your shopping habits to your employer?

The statistics support this theory – as Gmail alone holds 30.57% of all email opens worldwide – while Apple devices (including iOS, iPadOS, and macOS) make up 55% of opens, with Outlook coming in at just 4%.

Here’s another fun statistic: 75% of users open their Gmail on mobile (while 64% of all mobile users keep dark mode turned on).

Tl;dr: People in SaaS companies probably should be worried about getting dark mode right on Outlook.

2. Each client changes colors differently

Almost all major email clients offer dark mode (except for Yahoo Mail and Gmail Desktop) – however, each client has different approaches to treating dark mode:

Some fully change colors present within the email – i.e., partial inversions
Some clients change white to black and vice versa – i.e., full inversions
and, some don’t really have support for dark mode

It can apply to images, HTML-specified colors, and PNG icons. Here’s a perfect example – check how the same email shows differently in dark mode in Gmail (Windows) and Outlook (Windows) as well as Gmail (Android) and Outlook (Windows):

Dark mode email example from Only Natural Pet on Outlook (Windows) and Gmail (web)

If you have noticed closely, Gmail for desktop keeps the email’s background remains white. Meanwhile, Outlook converts colors – and so does Gmail on Android.

However, the real twist comes if you compare how Gmail (Android) changes colors compared to Outlook (Windows) – which leads us to our next point.

3. Not all code is honored

Dark mode for email essentially involves adding a bit of code that lets the email client know the email supports dark mode. It also involves adding CSS ‘@media’ queries to perform certain actions when dark mode is detected. However, the code may not work the same way as we may expect it to – as some clients support forms of code, while others don’t.

For example, both iOS will change pure white (#ffffff) to pure black (#000000) – irrespective of the code. In some cases, the email client will change the colors in images by auto-applying filters – or inverting images. Let’s take the same email from Only Natural Pet as an example:

Showing how Gmail and Outlook interpret the same email differently in dark mode

Note how Gmail (Android) and Outlook (Desktop) change the colors of the text and images. Both Gmail and iOS invert colors fully as well as affect images, leading to unpredictable color changes, as we just saw above.

4. Dark mode emails break on Gmail

Gmail doesn’t honor any user-included code when it comes to dark mode – sometimes not all colors or images may change and lead to scenarios like these examples:

a) Colors go off-brand

Note how the YouTube logo disappears; while the Pinterest logo changes color altogether – while the second email shows a different color shade:

b) Logos and text disappear into the background

White changes to black – black turns to white, which leads to logos and HTML text disappearing altogether:

c) Partial color changes wreak havoc on the email

Note this particular example of Gmail doing a partial inversion on lighter colors by turning them to a darker shade and vice versa – but things go wrong:

Dark mode email examples showing challenges of dark mode emails: partial color changes

👉 Key takeaway: Get your dark mode email right on Gmail (Android) if you want your emails to work – irrespective of how most email clients handle dark mode.