BLOG   |  CONTACT   |  1.866.526.9955

The Lasso Blog

Come to the dark side… if you dare.

There’s a lot of talk lately in the email world about dark mode and how it will impact your email design. Despite its spooky moniker, there’s really nothing to be afraid of.

Developed as an accessibility setting, dark mode flips your screen’s color palette to display high contrast content on a dark background with lighter text. This minimizes blue light and is meant to reduce strain on the eyes.

How does it work?

Dark mode checks for any color or background color within your HTML then targets those attributes and adjusts them to make them lighter or darker. So, if your text is dark, it will be changed to a lighter color. Not such a big deal in a plain text email, as it will just flip the black and white elements. But in HTML emails, where there is a variation of defined colors, this can get tricky.

What does it look like?

Let’s compare how dark mode renders on 2 of the most widely used email clients, Microsoft Outlook and the recently released Apple iOS 13. Both of these platforms render dark mode email quite differently and, consequently, present a different set of issues.

First, MS Outlook. You can see in light mode, images and text all render beautifully. When flipped to dark mode, the header logos have an unsightly white box around them, while the monotone gray color on “The Spruce” logo almost disappears entirely.

Email Dark Mode

We can fix this by making sure that all logos and images with white backgrounds are uploaded as PNG files with transparent backgrounds. Fixing the issue with “The Spruce” logo took a little more imagination. By dropping the content onto a block with a darker background (available in the blocks library in our design editor), I was able to achieve a good enough contrast between the logo and the background to ensure readability on both light and dark settings. Here is the result:

Email Dark Mode

Now let’s take a look at that same email on an iPhone, operating with iOS 13. You can see in the image below that, aside from the black border around the perimeter of the email, not much has changed. This is great news for marketers and designers, as their email designs are appearing in inboxes exactly as planned. It’s not so great for readers who have purposely set their phones to dark mode. Bright colored backgrounds can be very jarring for a reader who is used to a darker experience.

Email Dark Mode

If this is something that concerns you, and you have access to someone who knows the ins and outs of HTML and CSS, there are ways to customize how your email will render specifically in dark mode. With a bit of tweaking to your code, you’ll be able to set background colors, font colors and even images by using the media query shown below.

@media (prefers-color-scheme: dark) { 
/*Insert all your dark mode classes here, as you would insert mobile responsive classes./ 
/* Remember to use !important to override inline styles */
}

Whatever methods you choose to approach your readers using dark mode, it is important to test, test and test again. Look for any issues in readability.

While dark mode might not deliver the pixel perfect design you had imagined, the most important thing is ensuring that none of your message gets lost in the darkness. Just like that monster under the bed, it looks like dark mode isn’t going away any time soon. Fortunately, armed with these tips and by testing your emails in both light and dark, you’ll be ready to battle whatever frightening obstacles it might throw at you.

 

Share This