How to optimize your email design for Dark and Light mode?

There is no denying that dark mode is taking over the inbox, but we are here to offer you some design tips that will make your emails look great regardless of the mode.✨

What is Dark Mode?

The Dark mode option is modifying the color scheme where light colors are presented on a dark (usually black or shades of gray) background. People like using dark mode because it's easier on the eyes, it saves battery, and it looks cool!

Dark mode on email clients and how it works

The dark mode is quite new for email clients. When in 2018, Apple introduced us to dark mode on the desktop email client, other clients followed along quickly.

I'm sure that some of you created light-colored emails, and they worked well on every email client. But once you switch to the dark mode, you could barely recognize your email.

What happens is dark mode will invert the colors from dark to light and from light to dark. But this might not always be the case since dark mode can be different for each email client.
For example, Gmail will replace the color values in the sheet, but Outlook will inline Dark Mode color values and add '!important' to them, making it impossible to override.

But also, not every email client with dark mode modifies the HTML. For example, Gmail, Yahoo webmail, and Outlook desktop app will partially color invert or only shift the UI colors but won't change the HTML:

where Outlook and Gmail mobile apps will override the HTML or do a full-color invert:

How to adapt your design for dark mode?

The best approach is to accept dark mode and design emails that work no matter the color the user chooses to view them. More users are starting to use and adopt Dark Mode, so it's only going to become more popular in the future.

Note: Never forget that every email client handles dark mode differently.

Adopt your logo for Dark Mode

The logo symbol and text should contrast the background color of your email. If the logo uses bright colors, then I recommend a transparent background. This is bulletproof for every mode.
If, however, your logo is black or has black text, then the logo will vanish in dark mode, or it will be extremely hard to see. But this problem can be solved by adding minimal light shadow or, even better, a stroke to the logo. This will save your logo in dark mode.

Use transparent images

Make sure your images are the same size. Don't adopt the image with the background color, because this can backfire. Meaning, if you have white space over the image in your normal light mode, it will look good, but in dark mode, the background will be dark, and the withe space around the image will show off. This can even make your email look broken. Always make sure that the image is with a transparent background.

Be cautious if you are adding a background

You can create a colored background or even use an image as a background. But, the dark mode could change the color of the text, if it's dark to light or if it's light to dark. So, I wouldn't suggest adding a white background and doing all modules with transparent backgrounds because then a dark text could turn the light on a white background on some email clients. 

Don't click send without a test

This is a must! Before you feel ready, you should always test your emails in light and dark mode. If something doesn't look right, you can always re-design.

So, sure dark mode adds extra work for both marketers and designers. But, then again, not all users will turn on dark mode, but it's still better if your design can adopt regardless of the changes dark mode makes.