Dark Mode Email Design: How to Optimize for Better Visibility and UX

With over 30% of users viewing emails in dark mode, designing for it is no longer optional. Poor dark mode optimization can lead to invisible logos, broken visuals, unreadable text, and inconsistent branding. This guide breaks down the essentials of designing emails that look great in both light and dark mode.

Problem: Dark-colored logos can disappear on dark backgrounds.

Solution:

• Add a white or translucent outline around the logo.

• Place the logo in a colored background frame.

Examples:

Problem: Images with transparent or partial frames can look broken.

Solution:

• Export images as PNGs with transparent backgrounds.

• Add enough padding around full-bleed or non-transparent images.

Note: This is especially important when layering image blocks over background colors.

Example:

When placing text directly below full-bleed images, make sure there's sufficient padding to avoid crowding or misalignment in dark mode.

Example:

Problem: Custom CTAs exported as images can disappear.

Solution:

• Add a stroke or outline to buttons.

• Use background color blocks for consistent visibility.

Example:

Problem: Dark icons and logos become invisible on dark backgrounds.

Solution:

• Add outlines or place icons on colored backgrounds.

• Flatten icon graphics when consistency matters.

Tip:

To decide the best approach, ask yourself: 

What matters most for this graphic—maintaining its original look and feel or ensuring it appears transparent?

• If maintaining the look and feel is key: place the graphic on a background and flatten the image for consistency.

• If transparency is the priority: add a stroke to make the graphic stand out in Dark Mode.

Examples:

Midtones help maintain contrast whether users are in dark or light mode. Choose colors that are balanced enough to be legible in both settings.

When designing with midtones, use a color that has a high enough color contrast for both white and black because it falls toward the middle of the value range.

Example:

When placing dark text or logos over a transparent background, add a white or translucent border. This ensures the element remains legible in dark mode.

What if you have text, logo, or other elements in a dark color on a transparent background? If you have dark text on a dark background, it can be hard to read. One way to fix this is to add a translucent (partly see-through) or white outline to the text. This can make the text stand out against the background, making it easier to read. The border is easy to add in a tool that works with images, like Canva, Figma, and of course Adobe Photoshop and the like. 

Examples:

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

Ensure divider sections connecting to build blocks have transparent backgrounds to prevent harsh breaks in dark mode.

Example:

Not required—but recommended. Adding side margins helps structure the email and prevent sections from merging visually in dark mode.

Example:

Let’s take a look at some examples of how brands handle the switch between light and dark modes. 

• Mobbin: Maintains visual balance with dark mode by outlining black logos.

Note that the screenshots in this section are made in Gmail on an Android device which supports only partial inversion. In light mode, Mobbin’s email has very clean, white, and light gray background colors with black text. It also has a few light images. The black mode reverses the text color to light gray, while the backgrounds are set to dark gray and black. The dark mode leaves the images and buttons untouched, but black buttons are still visible and clear thanks to their dark gray background.  The minimalist black logo in the email’s dark mode is still visible thanks to a white/light gray border around it, which harmonizes nicely with the color of the text. Overall, both light and dark modes look professional and well-designed.

• Mount Sapo: Keeps minimalist design intact with subtle background shifts.

This email from Mount Sapo follows the brand’s website’s beautiful and minimalistic design, and it managed to keep the same feel in the dark mode, too. The light yellow background in light mode became olive, while the text turned from dark gray to white and light yellow.  The email handled the logo by using a transparent background in both versions. However, instead of adding a white or translucent outline to it, the team behind the brand made its color brighter — which nicely matches one of the colors used on their website and keeps the whole campaign in line with branding.

• theSkimm: Uses rounded white backgrounds on logos for consistency.

theSkimm went for a simple switch of light to dark, with some minor adjustments. The white background and dark text of the first half of the email turn into a black background and white text in dark mode. The original design of the second half already fit with the dark mode so it stayed as is.  Some of the logos in the email showed up with white backgrounds. This is a deliberate choice by the team behind theSkimm. The white “backgrounds” of the logos have rounded corners, which means the white color is part of the logo, and the actual background is transparent. This design decision makes logos very clear and keeps them the same in both versions, preserving brand identity and recognition.