Dark Mode is an inverted app display where the background of the app is black instead of white and the text is white instead of black.
This feature is designed to reduce blue light exposure while also saving battery life. It is becoming increasingly popular amongst both desktop and mobile apps and email clients. With adoption of Dark Mode becoming more prevalent, it is critical to make sure you understand how your email may be impacted and how to optimize your emails for display in both light and dark modes.
Email clients (such as Gmail, Yahoo, etc.) render emails in dark mode differently. Some do not change the email contents at all while others invert all background colors and text. In some cases, an email featuring a black background may remain black in some email clients and in others may revert to a white background instead. To counter this, create a test list that includes multiple devices types and email clients -- to view how the email looks across a multitude of devices.
Focus on your email subscribers’ most commonly used devices/email clients, as those are most critical. It is not possible to design for all the iterations but it is critical to make sure the most popular amongst your email list are considered.
Optimize your emails for Dark Mode
- Images – Images are never modified for dark mode and will always display as intended.
- Images/Icons - JPG vs PNG format – JPG images always have a solid background whereas a PNG file can be displayed with a transparent background. Thus, a JPG image with a white background will display in dark mode with a white background as well. A transparent PNG will display the content background color so it is a good idea to ensure whatever content is in the PNG can display effectively on a darker background.
Product Image - Transparent PNG vs JPG w/ Solid Background:
Logo – Transparent PNG vs JPG w/ Solid Background:
TIP: For darker logos using a transparent PNG, place an outline around the image so it displays properly on dark mode.
- Background Color – The background is the primary change in dark mode where the white background inverts to black. You can control the variation of the color changes here. White will invert to black for example but a light gray will render out as a dark grey or charcoal. The same principle will apply to all color variations so darker colors will display lighter on dark mode and lighter colors will display as darker.
Example of background color inversion:
- Text Color - Text will follow the same guidelines as the background colors. It is best to use black or darker greys for text so they invert with good contrast on dark mode. Links can feature more branded colors so they still stand out as expected.
Example of text color inversion:
- Buttons – Same principles apply to buttons as well for both the text and button background colors. Best advice here is to make sure your button background color and text have good contrast and the text is highly visible.
Examples of Button Color Inversions:
 |
