Many email clients have a dark mode setting, which may lead to inconsistencies with how your marketing emails appear in clients with a brighter appearance enabled.
To see how your email will look when a contact opens it in a browser or client with dark mode enabled:
When you preview your email with different dark-mode clients, keep in mind that each client may render your email differently. For example, if your contacts open your email using Apple Mail, it will appear exactly the same whether or not they've enabled dark mode or not. Whereas if a contact enables dark mode in apps like Gmail or Outlook on Windows, you may notice more drastic differences in your email styling, such as inverted background colors.
To confirm your email styling is consistent between clients, review the tips below.
Convert your images to PNG files before you upload and add images to your emails, which helps ensure they will render in email clients that automatically invert the background color of emails in dark mode. If your image has text in it, such as a logo, you can also add a translucent outline around the text to make it stand out.
Designing your email content to be accessible is important regardless of the email client your recipient is using. Adhering to accessibility standards, such as checking the color contrast of your text, will also help your emails appear render correctly in dark mode. Learn more about web accessible colors on the HubSpot blog.
Several email clients, including Apple Mail and Outlook.com, offer limited support for detecting and adding custom styling via a media query. If you're using the updated classic email editor and you have developer resources to make CSS changes to your emails, you can add a media query with the prefers-color-scheme media feature to configure how images and text will look in dark mode and light mode