We get it! Using dark mode on your desktop or mobile device can be easier on the eyes for your subscribers, but your email designs shouldn’t be punished for it. Here are some design tips to help ensure your email content works for both light and dark modes.
Tip #1: Make sure all logos have a white background or white outline.
Dark mode works by inverting light elements to dark ones, such as a white background, to a black background. To avoid the switch of background colors compromising your logo’s clarity, it can help to give the logo a white background or outline to ensure it is always visible.
Below are examples of logos and what they look like in light mode vs. dark mode:
Logo with a white background:
Logo on a transparent background with a white outline:
Tip #2: Avoid using dark image backgrounds with light colored text.
Whether or not the text color in your email is inverted is at the discretion of the email provider. Some email clients will invert the light colored text to a dark color, making it hard to read your content as shown here:
To avoid text that becomes hard to read in dark mode, try one of these two approaches:
- Don’t use a dark-colored background image and instead apply a background color. With that, both the font and background content will correctly invert to remain legible.
- To avoid dark mode inverting colors, create an image of your text and add it using an image block instead of adding a text block over a dark background.
- Just make sure the image has alt text so it is accessible.
Tip #3: Add borders to buttons.
Following the concept in Tip #2, email clients will invert colors, which can also affect your button visibility, making them hard to see against a dark background. Placing a border adds contrast to make your buttons stand out against a dark background. One thing to keep in mind is that not every email client will display the borders, but it is helpful for those that do!
Add a border color that matches the background color of the Section.
For example, should your button sit on a white background, apply a white border to the button as shown here:
Tip #4: Make sure images/design elements have transparent backgrounds.
Using images with transparent backgrounds (.png images) will create cohesive designs. The transparent background will improve aesthetics by seamlessly integrating with the email client’s inverting colors as shown below. The image on the left does not have a transparent background, while the image on the right does: