Dark Mode Compatibility in LianaMailer Email Templates

The appearance of emails may change depending on how the recipient's email client handles dark mode. This also applies to newsletters and email templates created with LianaMailer.

Different email clients handle dark mode in different ways. Some do not change email colors at all, some modify only certain colors, while others partially or completely invert background and text colors.

As a result, an email designed for light mode may not look as intended when viewed in dark mode. For example, text may become invisible, logos may blend into the background, or brand colors may change.

When designing an email template, it is important to consider the following points to ensure that the message remains as readable as possible in both light and dark modes.

1. Consider Dark Mode from the Beginning

Dark mode should be taken into account from the very beginning of the email design process, rather than treated as an afterthought.

Choose colors and design elements that maintain readability even when the recipient's email client automatically modifies the colors.

2. Choose Colors Carefully

Use sufficient contrast between text and background colors. Good contrast helps ensure that automatic color adjustments made by email clients do not significantly affect readability.

The recommended contrast ratios are:

• At least 4.5:1 for regular text.
• At least 3:1 for large text.

Avoid using pure black (#000000) backgrounds and pure white (#FFFFFF) text, as their inversion can result in harsh and unwanted color changes.

It is also important to maintain sufficient contrast between background and text colors. Clear contrast helps email clients produce more readable color combinations in dark mode.

3. Ensure Logos and Images Remain Visible

Images and logos may behave differently in dark mode.

• Logos: A logo can have its own background color and sufficient padding included in the image file. This helps the logo remain distinguishable even when the email client's background color changes.
• Transparent images: Avoid using transparent background images for now. In particular, Outlook 365 on Windows and older Outlook versions may not handle transparent background images as expected. Outlook may bake the background color into the background image, preventing the email client from adjusting the colors as intended.
• Product images: Product images with white backgrounds may appear as isolated white boxes in dark mode. Consider this when positioning images and choosing background colors.
• Alt text: Add descriptive alternative text to all images so that their content is still accessible when images are not displayed.

Using a separate dark mode version of a logo is not recommended. Not all email clients support dark mode-specific CSS, so the alternative logo may not be displayed even when the recipient is using dark mode.

4. Ensure Text and Buttons Remain Readable

• Use actual text instead of images for headlines, prices, and button labels. This helps keep the content readable across different display modes.
• Choose button colors that stand out against both light and dark backgrounds.
• Ensure sufficient contrast between button text and its background.
• Use sufficiently large font sizes and avoid overly thin fonts, as they may be harder to read in dark mode.

5. Avoid Complex Gradients and Shadows

Gradients and shadows may change or disappear entirely when an email client modifies the colors.

Keep the email design as simple as possible and avoid complex visual effects that rely on specific color combinations.

6. Consider Dark Mode Styles in HTML Email Templates

HTML email templates can include separate styles for dark mode using CSS media queries.

For example:

@media (prefers-color-scheme: dark) {
    /* Dark mode styles */
}

This allows you to define separate colors for email clients that support this feature. Apple Mail supports it, while support in Outlook apps is partial.

However, not all email clients support these styles. Therefore, you should not rely on them as the only way to control the appearance of your email.

7. Test Emails Across Different Environments

Always test the email in both light and dark modes before sending it.

Where possible, test the email in at least the following email clients:

• Gmail
• Outlook (Windows and mobile)
• Apple Mail

Pay particular attention to the following:

• Are all texts and headlines clearly visible?
• Do logos and images stand out from their backgrounds?
• Are buttons still easy to identify?
• Is there sufficient contrast between colors?
• Does the overall appearance still reflect your company's brand?

8. Include a "View in Browser" Link

Where possible, include a View in Browser link in your email. This allows recipients to open the message in a web browser if color changes made by their email client affect its appearance.