Optimizing Emails for Dark Mode

Many email recipients use dark mode on their devices, which inverts the colors of your email—turning light backgrounds dark and dark text light. This can unintentionally hide logos, break your design, and make text unreadable.

This guide provides best practices for designing emails that look great in both light and dark mode. You can preview how your email will appear using ContactMonkey's built-in dark mode previewer.

How to Preview Your Email in Dark Mode

Before sending, always check the dark mode preview to catch any design issues.

1. In the Email Builder, click Preview in the top-right corner
2. Select the moon icon to enable dark mode

Design Recommendations for Dark Mode

Images and Logos

• Use Transparent Backgrounds: Whenever possible, use images with transparent backgrounds (ex: PNG). This allows the image to sit seamlessly on any background color, whether it's light or inverted to dark.
• Add a Subtle Outline to Dark Assets: Logos, icons, or text that are black or dark-colored will disappear on a dark background. To ensure they remain visible, edit the image to include a thin white or light-gray outline or a subtle glow.
• Manage Whitespace: If you can't use a transparent image, ensure there is ample whitespace around it. This makes it clear that the image's background is an intentional part of the design.

Buttons

Black or dark-outlined buttons can blend in with an inverted background. To prevent this:

• Use Bright, Colored Buttons: A colored button with white text is the most reliable option and will stand out in both light and dark modes.
• Avoid Pure Black: If you must use a dark button, use a dark gray (e.g., #333333) instead of pure black (#000000). This makes it less likely to completely merge with the background.

Backgrounds and Text

• Check Text Contrast: When using colored text on a colored background, use the dark mode preview to ensure there is still enough contrast for your text to be readable after colors are inverted.
• Be Cautious with Background Images: Some email clients will invert solid background colors but not background images. If you have light-colored text over a dark background image, the text may be inverted to a dark color, making it disappear against the image.
  • Pro-Tip: For critical elements like banners, consider saving the text as part of the image itself. This ensures the text and background image always appear exactly as you designed them.

A Note on Custom Code (CSS)

While it's possible to use custom CSS code to try and control dark mode behavior, we strongly recommend against it. Support for this code is inconsistent across email clients like Outlook, Gmail, and Apple Mail, often leading to unpredictable results and more work. Following the design practices above is a more reliable way to achieve a great-looking email.