Optimize marketing emails for dark mode

In the email editor, you can preview how marketing emails will appear in dark mode while you're editing or generate previews for specific email clients. This can help ensure that recipients who view your marketing emails in dark mode can view them as intended. 

Preview dark mode in the email editor

To switch to a dark mode preview of your email while editing:

1. In your HubSpot account, navigate to Marketing > Email.
2. Click the name of a drafted email.
3. In the email editor, click Display options at the top of the page, then toggle the Dark mode preview switch on.

Preview dark mode in specific clients

To see how your email will appear in specific browsers or email clients with dark mode turned on:

1. In your HubSpot account, navigate to Marketing > Email.
2. Click the name of a drafted email.
3. In the email editor, click Preview and test in the top right, then select Preview in an email client.
4. On the preview screen, click the Choose preview type dropdown menu in the top left, then select the checkbox next to each preview type. To see available preview type for dark mode, type "dark" into the search bar. 

5. In the upper right, click Preview.

Understand best practices for designing emails for dark mode

Different email clients and browsers may render dark mode differently. Keep the following suggestions in mind when designing emails to be viewed in dark mode: 

• Use images that will appear clearly on both light and dark backgrounds: convert any images to .png format to ensure they appear correctly if the background color is inverted. 
• Ensure any text has enough color contrast: adhere to web content accessibility guidelines and ensure that there is enough contrast between text and background colors.
• Add a media query for dark mode: some email clients offer limited support for custom styling using media queries. You can use the prefers-color-scheme media feature to set how images and text will appear in dark mode. This option is only available for email templates created in the design manager.