Dark Mode Emails

This guide explains how to preview and optimize your email for dark mode rendering in Sender's drag-and-drop email editor.

Where to Find This Setting

The primary dark mode control is in the Preview tool. Click the Preview button (eye icon) in the top toolbar to open the preview panel, which displays your email in both desktop and mobile views. The Dark mode preview toggle appears in the top-right corner of this panel.

Color settings that influence dark mode rendering are located across multiple panels. Background color and Content background color are found under Template settings → General settings in the left sidebar. Per-section colors are set in Section settings on the right panel when a section is selected. Per-block and per-column background colors are available in Block settings and Column settings when any content block is selected. Text color and Link color are configured within individual block settings, such as Headline settings or Paragraph settings.

Steps to Optimize for Dark Mode

Step 1 — Preview Your Email in Dark Mode

Click the Preview button in the top toolbar. In the preview panel, locate the Dark mode preview toggle in the top-right corner and switch it on. Both the desktop and mobile previews update immediately to simulate dark mode rendering.

Review the entire email for any areas where text becomes unreadable, colors lose contrast, or images blend into the dark background.

Step 2 — Adjust Background and Text Colors for Contrast

Return to the editor and select any section or block where dark mode caused readability issues. In Template settings → General settings, check that Background color and Content background color use values that produce sufficient contrast when inverted.

In Section settings, review the Content background color and Section background color. In individual block settings, adjust Text color and Link color to ensure they remain legible against both light and dark backgrounds. Avoid pure white (#ffffff) backgrounds paired with very light text, as dark mode may invert only one of these values.

Step 3 — Test with a Real Inbox

Click Send test email in the top toolbar to deliver a test message to your own inbox. Open the email on devices and email clients that support dark mode, such as Apple Mail, Gmail, or Outlook mobile.

Compare the actual rendering with the editor's Dark mode preview to identify any differences. The preview is an approximation — real-client testing confirms how your design actually appears.

How It Renders

Apple Mail (macOS and iOS) — Apple Mail applies a full color inversion in dark mode, swapping light backgrounds to dark and adjusting text colors automatically. Light-colored images with no transparency generally display as expected, while transparent PNGs may show unexpected dark areas behind them.

Gmail (Android and web) — Gmail's dark mode behavior varies by version and device. On Android, it may invert background colors, tint light backgrounds darker, or leave the email unchanged depending on the color scheme detected. The web version in a dark-themed browser may not apply any dark mode changes to the email itself.

Outlook (desktop and mobile) — Outlook on Windows uses its own dark mode rendering engine, which can heavily modify background colors and override text colors. Outlook mobile apps generally apply lighter inversions. Buttons and images are typically preserved, but background color swaps can reduce contrast in unexpected areas.

Yahoo Mail and AOL — These clients apply a partial dark mode that inverts some background colors while preserving others. Results can differ from the editor's preview.

Display Tips

Use high-contrast color pairings — Choose text and background colors that maintain readability whether the background stays light or is inverted to dark. Avoid low-contrast combinations like light gray text on white.

Avoid relying on background images alone — Some email clients strip or fail to render background images. Always set a fallback Background color in Section settings or Column settings to maintain contrast if the image does not load in dark mode.

Use solid-background images instead of transparent PNGs — Dark mode can fill transparent areas with the inverted background color, causing logos or icons to look distorted. Export images with a solid background to prevent this.

Check both desktop and mobile previews — Dark mode rendering can differ between the desktop and mobile version of the same email client. Toggle Dark mode preview on and inspect both views in the Preview panel.

Send test emails to multiple clients — The Dark mode preview toggle is an approximation. Click Send test email and open the message in at least two or three different email clients with dark mode enabled to verify your design.

Common Issues

Text disappears in dark mode → The email client inverted the background to dark but the text color remained dark or was not adjusted. Select the affected block, open its settings, and change Text color to a value that contrasts against both light and dark backgrounds, then re-check with Dark mode preview.

Logo or icon looks broken on a dark background → The image uses a transparent background, and the email client filled the transparent area with a dark color. Re-export the image with a solid background that works on both light and dark surfaces.

Button color changes unexpectedly → Some email clients override inline background colors in dark mode. Button colors set through the editor are generally preserved, but certain Outlook versions may alter them. Test with Send test email to confirm, and consider using a bold, high-saturation button color that remains visible on dark backgrounds.

Background color renders differently than the preview → The Dark mode preview is an approximation. Different email clients use different dark mode strategies — some invert all colors, some only adjust backgrounds, and some do nothing. Always verify with test emails sent to real inboxes.

FAQs

Can I control exactly how my email appears in dark mode?

Dark mode rendering is controlled by each email client, not by the sender. The editor does not include settings that override dark mode behavior in recipients' inboxes. You can optimize your color choices and test with Dark mode preview, but the final rendering depends on the email client and its version.

Does the Dark mode preview show exactly how my email will look?

No. The Dark mode preview toggle provides a general approximation of dark mode behavior. The tooltip in the editor confirms that due to differences in email clients, browsers, and devices, exact rendering may vary. Always send a test email to verify in your target clients.

Should I design my email specifically for dark mode?

Rather than designing exclusively for dark mode, design for both light and dark contexts. Use high-contrast color pairings, avoid transparent image backgrounds, set fallback background colors, and test with the Dark mode preview toggle and Send test email before finalizing your campaign.

Will dark mode change my button colors?

Most email clients preserve button background colors in dark mode. However, certain versions of Outlook may adjust them. Use a distinct, saturated button color and verify rendering through test emails.

Why does my email look different in Outlook dark mode compared to Apple Mail dark mode?

Each email client applies its own dark mode algorithm. Apple Mail performs a full color scheme inversion, while Outlook on Windows uses a proprietary rendering engine that can change colors more aggressively. There is no universal standard for dark mode in email, so results vary across clients.