Creating an email for dark mode

Dark Mode inverts the colors on your device to decrease the amount of light on your screen, reversing a white background and black text to a black background with white text. 

In order to create a quality dark mode email make sure you apply these 4 factors...

Before you get started

• Make sure you have created an email

4 factors when creating a dark-mode email

• Colour palette contrast shifts between light and dark backgrounds: Dark mode adjusts the background and font colours of an email to make them lighter or darker. So, if your text or background is a dark colour, the dark mode setting will change it to a lighter one.
  Some email clients auto-invert colours and some don’t - here's a breakdown:

• Beware of transparent images: JPG images with white backgrounds will stay how they are which doesn't look professional. This can also lead to invisible sections if transparent images are used with text. 
  How to avoid this? Use PNGs with transparent backgrounds, and Make sure each image section you build expands to the full width of the email and fills in any potential gaps with additional white image pieces.  

Dark Mode:

Light mode:

• Text readability on changed backgrounds: Dark mode emails can sometimes cause an unwanted disappearing act in your campaigns. Suddenly black text, icons, logos, and more are invisible against dark backgrounds. 
  How to avoid this? Avoid putting all the text in images, reduce the image-to-text ratio, and don't put pure white text on pure black backgrounds

• Test before sending: Test your Dark Mode emails in as many ways as possible to see how they render on the three major email platforms: Apple Mail, Gmail, and Outlook.
  

This generally applies to Yahoo mail and Gmail webmail. In these cases, email rendering doesn't change in dark mode. Instead, the email client UI's colour scheme is shifted.

Partial Colour Inversion

This generally applies to outlook.com. In this case, light-coloured sections only invert to darker colours.

Send a test email

Create an email

Still need help?

Contact us at support@audiencerepublic.com