Dark Mode is a popular setting for several email clients. However, this setting can cause your email to render in some unexpected ways. Read on to learn what Dark Mode is and how to optimize your campaign for this setting.
What is Dark Mode?
Dark mode is a setting that displays light-colored text, icons, and UI elements on dark backgrounds. When an email client detects a background color, it applies a dark background if it has not been set and applies contrast shades of email content colors.
When it comes to a black background, the dark mode turns it to white in Gmail on iOS and Andriod. Then dark grey is shifted to light grey, etc.
Dark Mode is a very popular setting for lots of reasons, including:
- Preference for darker interfaces
- It can help minimize eye strain, especially in low-light situations
- It saves battery life by reducing screen brightness
- It can improve content legibility
Dark Mode is enabled by the contact or subscriber either through their email client or App UI.
To see a list of email clients that support Dark Mode, visit “The Ultimate Guide to Dark Mode for Email Marketers” blog post from Litmus.
Best practices for optimizing your campaign for Dark Mode
Each email client renders your email differently. Unfortunately, this is something that ActiveCampaign cannot control. However, there are best practices we recommend to help keep your email styling consistent between email clients, whether or not your subscribers use the Dark Mode setting.
Optimize your logos and images for Light and Dark Mode
Use images with transparent backgrounds or make sure that image backgrounds are the exact same size to avoid awkward juxtaposition.
In addition, you’ll want to avoid logos that are darker in color, such as black. If they are, it will be difficult for your subscribers to see your logo in Dark Mode.
One way to get around this is to apply a light shadow or light stroke to your dark logo. That way, it will stand out from the background color and render in both Light and Dark Modes correctly.
Set a background color for your content for Light and Dark Mode
If you do not want your email content to have a dark background, you can set your own background color with ​​ActiveCampaign’s new email designer. Doing so ensures that the “Content background” color will remain consistent between Light and Dark Modes. However, customers may see a slightly different color hue between email clients and devices.
To set this up, click the “Section - Content” area of your email layout. Then, click the “Content background” option on the right pane and select the color you wish to use. Make sure to do the same for containers.
Next, set the “Section background” to transparent. That way, your content background color will be applied to the email content and not the entire email area.
Test your campaigns
Make sure to test your emails in both Light and Dark modes to see how the email may appear for your subscribers.
Code Example
If you are comfortable with using CSS and HTML, you can easily edit code with the New Email Designer to optimize your email for both Dark and Light Mode. Please see this resource containing examples for more information.