Why are colors in emails are reverted in dark mode?

Suggested readings: Rising Trend in Email Design: Dark Mode, What can we do to avoid facing issues in the dark mode?

Email clients typically invert colors to improve readability and reduce eye strain when users are viewing the content in low-light environments. This inversion often affects the text, background colors, and other elements of the email.

The reason behind this inversion is to ensure that content remains visible and legible against a dark background. Light-colored text and backgrounds, suitable for normal (light) mode, may become difficult to read when displayed on a dark background. The email client can invert the colors to maintain readability and provide a consistent experience across different viewing environments. While this behavior is intended to enhance the user experience, it can sometimes lead to unintended changes in the appearance of emails, mainly if they rely on specific color combinations or designs.

Email designers can use background images instead of colors to overcome such issues and control how their content appears in light and dark modes. It's also essential to test email templates across various email clients and viewing modes to ensure they display as intended.

Use a background image

To use a background image, follow these steps:

1. Create a 1x1 pixel png image of the color you need as a background color. You can use some online services such as online png tools. 

2. In the drag and drop editor, select the structure or the stripe that you want to add apply background color to, and turn on the “Background image” toggle that is closed by default.

3. Upload your pixel image into the image library of the drag and drop editor.

4. Turn on  the “Repeat image” toggle to multiply the pixel and fill up all the background with it.

5. Turn on the “Adjust to width” toggle to fill up all the width of your stripe with the background pixel color.

Keep in mind

• Your background color will not revert in dark mode when using image as a background. That's why you must remember to apply right font color, so that text always looks good in both light and dark modes. 
• You should use middle tone colors that are in the middle of the tonal spectrum, neither dark nor light. 

Best practices

Below you can find some best practices to create email designs for dark mode.

• Use high contrast colors: Opt for color combinations that maintain good contrast between text and background, ensuring readability in both light and dark modes. Dark text on a light background or light text on a dark background usually works well.
• Avoid pure black and white: Pure black (#000000) and pure white (#FFFFFF) can be harsh on the eyes, especially in dark mode. Consider using slightly off-white or off-black shades for better visual comfort.
• Test background images: If you are using background images, ensure they complement the content and remain visible and aesthetically pleasing in dark mode. You should test across different email clients to ensure compatibility.
• Consistent branding: Maintain consistent branding elements such as logo, typography, and color palette across different modes to reinforce brand identity and recognition.
• Readable fonts: Choose legible fonts that are easy to read on both light and dark backgrounds. Sans-serif fonts often work well for body text, while serif fonts can add elegance to headings and other prominent elements.
• Provide alt text for images: Include descriptive alt text for images to ensure accessibility for users who rely on screen readers or have images disabled. Alt text should convey the essential information conveyed by the image.
• Minimize text overlays on images: Avoid placing text directly on top of images, as it may become unreadable or illegible in dark mode. Instead, use contrasting backgrounds or text boxes to ensure readability.
• Accessibility considerations: Ensure your email design complies with accessibility standards, including sufficient color contrast, proper heading structure, and keyboard navigation support.

You should regularly test your email designs across different email clients, devices, and viewing modes to identify and address any issues that may arise.

You can follow these best practices to create email designs that look good and maintain readability in both light and dark modes, providing a positive user experience for your subscribers.