The email marketing dark mode mistakes switching between dark mode and light mode

The Email Marketing Dark Mode Mistakes?

Table of Contents

Are you making email marketing Dark Mode Mistakes?  We see many people make these mistakes with their email outreach, but let’s make sure you’re not one of them.

What is “Dark Mode,” and why does it matter?

Some people prefer to use the “dark mode settings.” In case you don’t know what that means, Dark Mode is when you have your computer set to automatically choose the black background for any website or software that offers dark mode. Let’s use Outlook settings as an example. You can switch by clicking between these two buttons on the top ribbon:

Switch Background to Light Mode button for Microsoft Outlook.           Switch Background to Dark Mode

When you or your marketing team are developing your emails, signatures, logos, etc… always check to see how they look in dark mode.

How Dark Mode changes the look of emails

Depending on the way you set up your email marketing templates, they may convert to dark mode just fine. However, when you don’t take the conversion into account when setting up the email body, logos, buttons, signatures, etc… you can send out something that looks very different than what you intend. Some colors can show up wrong, and some things might not show up at all. Here is an example of an email that had the majority of the content show up okay, but one section showed up like this:


Email Marketing Mistakes with Dark Mode showing how text does not show up in dark mode


In addition to the body background, always check how a button’s colors show up in both dark and light modes. Here are examples of two colors and how they look when switching between black and white backgrounds:


Blue button on black dark mode backgroundBlue button on white light mode background

Yellow button on black dark mode backgroundYellow button on white light mode background


As you can see, the blue button looks fine, while the yellow button looks brown. If your brand includes colors that get changed as dramatically as the yellow example above, you need to do the extra work on your email templates.

How to make sure emails show up correctly in Dark Mode

To make sure text, button colors, logos, etc., show up correctly in emails for people who use “dark mode,” follow these steps:

✓  Use a well-built email provider: Choose an email client that supports dark mode and allows you to control the styles of your emails.

✓  Use the appropriate CSS styles: Use CSS styles that are supported by dark mode and ensure they are applied consistently across different email clients.

✓  Test your emails: Test your emails on multiple devices and email clients, including those that support dark mode, to make sure that the styles are applied correctly and that the text, buttons, logos, etc., are easily readable.

✓  Use high-contrast colors: When selecting colors for text, buttons, and logos, choose high-contrast colors that are easily readable against a dark background. If your brand colors don’t show up well against dark mode, try using an outline (stroke) that will allow it to show on both black and white backgrounds.

Consider using images: If your logos and other graphics do not show up correctly in dark mode, consider using images instead. You can use images to ensure that the colors are displayed consistently. But keep in mind some email privacy settings don’t display images unless the user downloads them. In this case, make sure to properly add alt text so the user can at least see what the image contains.


By following the above guidelines, you can make sure your emails display correctly in dark mode and light mode to avoid making email marketing Dark Mode Mistakes.


Post Topics
Explore More
Skip to content