Designing for Dark Mode (Tips)

In this article we're sharing with you what our designers have learned about designing for dark mode.

Reasons to do it

You’re working with recipients and inboxes and not against them. You get to keep the integrity of your design without losing out on readership because your email is designed for everyone in mind.

What it does

Dark mode inverts your light areas and dark text to dark areas with light text. So if your email is a white background with black text, it becomes an email with a black background with white text. This affects links as well. It does not affect images.

Dark mode don’ts

1. Do not attempt to work around dark mode by incorporating a lighter background image. This doesn’t work out as you’d expect – it will still recognize the text and background as needing to be reversed, so you’ll end up with light text on a light background.
   
   
2.  Do not use all images. While this does ensure your email remains consistent regardless of the inbox or settings within, it’s not a good practice in general.

Dark mode do’s

1. If you have a transparent logo that is dark, outline it with the color of your light background. This ensures the logo remains visible even in dark mode. Repeat this process with any dark transparent pngs such as icons or glyphs.
   
   
2. With general images, keep in mind the end result. If you have a bright image that leads into a brightly colored background, if the image is not transparent, the bright background color will no longer match the image in dark mode. When possible, either make sure to have an intentional looking end point for the background of your image or make it transparent so that it can invert gracefully.
   
3. If you have a background pattern or image you’d like to use, try making it as transparent as possible so that it still looks nice whether light or dark. No background pattern should be too busy, as that can affect the readability of your email.

If your email is already dark, it will not invert with dark mode turned on. 

Dark mode isn’t for everybody, so it’s still good to essentially have both a light and dark version. However, you can still design specifically for dark mode if you want to ensure your email is consistent all around. 

As always is the case: contrast is key

Regardless of how you continue to go about creating your emails, contrast is your best friend for best visibility and readability. Make sure your text is legible against its background, and that your CTAs are clearly visible and don’t fade into their surroundings.