Designing Emails for Dark Mode

Dark Mode stands out in a sea of off-white, and makes your emails accessible to those with color issues and sensitivity. It looks pretty rad too, if we do say so ourselves.

Cathrina Dionisio

Dark Mode stands out in a sea of off-white, and makes your emails accessible to those with color issues and sensitivity. It looks pretty rad too, if we do say so ourselves.

But designing emails for dark mode can feel like designing in the dark if you don’t know what you’re looking for. And with consumer surveys citing more than 88% of users preferring Dark Mode, it’s not just an edge case, but a mainstream design consideration that’s here to stay.

Bad emails can happen to great designers because of some of the lack of control and training required to really understand how to work across the systems. So we put together a handy dandy Dark Mode Design Checklist from our in-house email design expert / illustrator / creative extraordinaire Mackenzie Tatham. (You’re welcome!)

Ragnarok Dark Mode Design Checklist

1.

Hex colors are often swapped with a lighter or darker counterpart in that color family. In particular, colors such as greens, blues, and yellows may turn into a “muddy” or dulled-down color once in Dark Mode. To combat this change we suggest a white, black, or grey background. Additionally, if you’re keen on keeping your original background color, try uploading the color background as an image with live text on top to preserve the color.

2.

If you’re really set on your brand colors, image slices are the way to go. But this means the content cannot be dynamic. If you go this route, it’s typically best to go fully sliced (vs. a mix of slices and HTML) or your design will become disjointed in dark mode.

3.

Transparent background PNG images work best with dark mode and offer the user a more seamless experience.

4.

Make sure to add a “halo” (aka a stroke in a light color such as white), to any CTA’s or vectors. This will ensure that any dark objects are still visible against a dark background.

5.

When in doubt, test it out! We recommend using a tool such as Email on Acid or Figma Dark Mode Magic to view a mock-up of what your email might look like.

We can help!

You can’t turn off dark mode, but you CAN turn on support from our team. Our email experts can audit your creative like it’s their job (well actually, it IS their job).