Optimize Your Email for Dark Mode

The Email Love Figma Plugin includes dark mode preview functionality and allows you to customize how your emails appear in dark mode on supported email clients. This guide will walk you through previewing and optimizing your emails for dark mode.

iOS Devices (Customizable) Custom dark mode colors are supported on Apple Mail clients including iPhone, iPad, and Mac devices. On these devices, you can override the default color inversion and maintain full control over your color scheme.

Other Email Clients (Auto-Inverted) Gmail, Outlook, Yahoo, AOL, and most other email clients automatically invert colors when in dark mode. This means white backgrounds become black, black text becomes white, and other colors may shift in unexpected ways (for example, yellow can become brown). Unfortunately, there is no way to override these color changes—no email builder or platform can control dark mode rendering across these clients.

For a comprehensive breakdown of dark mode support across email clients, refer to Litmus's dark mode support chart.

To see a basic preview of how your email will render in dark mode, click the Preview button in the plugin, then toggle the Dark Mode option in the preview window. This preview shows a simplified version of color inversion, giving you a general sense of how your email might appear, though actual rendering will vary by email client.

If you want to maintain control over your color scheme on iOS devices rather than allowing automatic color inversion, follow these steps:

Frame-Level Customization Select your email frame in Figma, navigate to the Appearance tab, and locate the Color Style section. Here you'll find options to define separate light mode and dark mode color schemes. In the dark mode section, you can specify custom colors for backgrounds, text, buttons, and other elements.

Wrapper-Level Customization For more granular control, you can override colors on a wrapper-by-wrapper basis. Select an individual section or wrapper within your email, go to the Appearance tab, and adjust the dark mode colors in the Color Style section. This approach provides the best results when different sections of your email use different color schemes.

Consider User Preferences Users who enable dark mode typically prefer darker color schemes. Overriding dark mode to maintain your light mode colors may go against user expectations and preferences. Consider whether maintaining brand consistency is worth potentially compromising the user experience.

Test Across Devices Always test your emails using a platform like InboxMonster, Litmus, or Email on Acid to see how they render in dark mode across different email clients and devices. Pay special attention to how colors transform in clients that auto-invert.

Accept Some Limitations Since you cannot control dark mode rendering in Gmail, Outlook, and other major clients, focus your customization efforts on the iOS ecosystem only if your audience heavily uses Apple devices. Otherwise, design emails that look acceptable when colors are inverted automatically.

After customizing your dark mode colors, export your email and test it across multiple email clients to ensure it renders as expected. Pay particular attention to iOS devices where your custom styling will appear, and verify that auto-inverted versions in other clients remain readable and on-brand.