← Customize 1200+ templates for your next newsletter

Design Inspiration

Dark Mode Design Best Practices

Dark Mode Design Best Practices

According to a 2020 study by Android Authority, 81.9% of participants use dark mode on their phones and 64.6% of participants expect sites and apps to automatically apply a dark theme or at least offer the option. Popular email providers like Gmail and Outlook have already launched dark mode as an option for their users, changing the game for email marketers and designers.

So, what’s the hype with dark mode? By turning light background colors dark (typically a shade of gray or black), it creates a new user experience that:

  • Enhances accessibility and reduces eye strain on those with light sensitivity.
  • Preserves battery life on devices by reducing screen brightness and using less energy. 
  • Offers a slick and cool dark interface that many prefer.

With the increase in user screen time, it’s clear to see why users want this option. 

It’s time for marketers and designers (I’m looking at you) to stop ignoring dark mode when designing. Taking the extra step enhances user experience, ensures that your content is accessible to all, and prevents your emails from being sent to the dark place – aka the SPAM folder.


The Cold Hard Facts about Dark Mode You Can’t Ignore

Dark mode is becoming the norm. Almost every email client has adopted their version of it and readers expect a consistent experience.

Your readers matter.

The number one rule for content marketers and designers is to put the audience front and center. Considering and testing how content looks in dark mode vs. light mode shows your readers that you care about creating a consistent, cohesive, and accessible experience for all.

Email clients are unpredictable.

Depending on the email provider, there are three different ways that email clients might change the look of your content:

  1. No changes at all: In the case of Yahoo mail and Apple Mail there is no impact on how emails are viewed. 
  2. Partial color invert: Email clients like Outlook only detect light-colored sections and turn them into darker colors. 
  3. Full color invert: This is where everything is inverted. All the areas with light turn dark and vice versa. This is the Gmail apps MO. 

It is important to make sure that designs are rendered as well as possible in both light and dark mode. If readers don’t recognize where the email is coming from, they will ignore it, delete it, and may unsubscribe altogether. This hurts your email deliverability in the long term.

Take the extra step to ensure that your reader experience is consistent and enjoyable, regardless of their preferred mode.

How to optimize emails for dark mode

Designing for dark mode doesn’t have to be hard. Here are some of our best tips to start implementing today.

Avoid using true black

The high contrast between true black backgrounds (#000000) and true white (#FFFFFF) will make things more difficult to read, defeating the purpose of dark mode altogether. Instead, use dark gray (#121212) as the background color to soften the contrast.

Saturated Brand Colors

While your saturated brand colors look great in light mode, these colors are too bright and will affect readability. 

Before you run away, we’re happy to say there is no need to call your design team for reinforcement. Instead, have fun and experiment with a desaturated or muted pastel version of your brand colors.

Optimize Images and Logos 

For many email marketers, this seems to be the biggest challenge when it comes to optimizing emails and landing pages for dark mode, but again, it doesn’t have to be. Here are a few ways to optimize images and logos.

  1. Use a logo that uses a brand color that isn’t black or white. 
  2. If you have an image or element with a black background, add a white outline to improve its visibility and avoid it from fading into the background. 
  3. Ensure images and logos are PNG format with transparent backgrounds.
  4. Keep things minimal. Dark backgrounds can give the illusion of limited space so keep things simple to not overwhelm the reader. 

 

3 Dark Mode Design Examples

Are you a visual learner? Oh Good! We have a few examples of designs we love and why they work.

Example 1: Apple Fitness App

The Fitness app is a great representation of how using bold colors against black backgrounds is still possible without it being too harsh on the user. Dark mode shouldn’t compromise the purpose behind the app. In this case, the final result is the same: it inspires movement and gets us excited to work out.

apple dark mode example

Apple Fitness App

Example 2: Notion App

Theis works because it exemplifies how dark mode shouldn’t hurt the essence of the product or the user experience. If anything, it enhances the experience altogether. Dark mode offers a level of sophistication and makes us feel fancy. All of these use different shades of gray to offer depth and create shadows without it feeling boring. 

Notion Dark Mode Example

Notion

Example 3: Google home screen

Google dark mode example

Google

Finally, Google’s dark mode offers a simple and elegant interpretation of dark mode. Notice that they don’t use true black (the background color is #202124) and they differentiate the search and “I’m Feeling Lucky” buttons with a shade of grey (#303134). Everything else is white, so that CTAs are clearly readable.

It’s time to stop ignoring the facts

Previously, email marketers and designers (looking at you again) have ignored the effects dark mode has on emails and landing pages. Partly because no one could have predicted how many users required this feature and partly because it seemed like a difficult task. We hope that we debunked that with this article. If we didn’t, then our apologies, but we want to offer you some hope.

 

The solution: Dark Mode Preview Toggle 

How can you adjust your email designs to account for dark mode? BEE Pro has the solution. Starting March 16, 2022, our email and landing page design suite will feature a new Dark Mode preview toggle that will help you create emails with dark mode in mind.

By simulating how your messages display in dark mode, it will help you recognize and avoid main design issues that may occur when an email message is received by a reader that has dark mode enabled.

How to preview how emails will render in dark mode

Preview how your email will render in dark mode

This handy feature will help spot common “design mistakes” and ensure that you are creating cohesive and consistent experiences for your readers without limitations based on the mode they choose to use. 

We hope that you’re as excited as we are. If you’re new to BEE Pro get started for fee. You can also check out our HTML professional email and landing page templates and choose one that is dark mode friendly (refer back to our tips above).

Our Reader Score:

Total: 3 - Average: 5

Emily Santos
Emily Santos

Emily Santos is a Content Specialist with experience as a Brand Strategist and Designer.