Preview and optimize how your email designs will appear in dark mode

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.

Preview your email's appearance in specific client dark modes

To see how your email will look when a contact opens it in a browser or client with dark mode enabled:

• In your HubSpot account, navigate to Marketing > Marketing Email.
• Click the name of an existing drafted email.
• In the top right of the email editor, click Preview then click Inbox Preview.
• In the top of the preview screen, click Clients.
• Under Dark mode, select the checkbox next to any client you want to preview.

• In the upper right, click Test my email now.

Best practices when designing emails for dark mode

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.

Use images that will appear clearly on both light and dark backgrounds

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.

Opt for web accessible colors

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.

Specify a media query for dark mode styling in iOS

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