Overview

Dark mode is a display setting that switches light backgrounds to dark and lightens text for easier readability in low-light environments. Users can enable it on their device or email app, or in their inbox, and decide how emails are displayed. Since senders cannot force or block dark mode, designs must adapt to both light and dark viewing.

Dark Mode Behavior Across Inboxes

Dark Mode Impact on Design

1. Text and Backgrounds: White backgrounds may turn black, dark text may flip to white, sometimes colors don’t flip, which means low contrast.
2. Fonts: No effect on font support, custom fonts still only work in a few inboxes, safe fonts display everywhere else.
3. Images/Logos: Some inboxes leave them untouched, others invert them (risk of distorted brand colors, disappearing logos)

Dark Mode Options in Design

Explore the design choices and controls available to make your emails look good in dark mode in the following editors:

1. Drag-and-Drop Editor

• Choose neutral color palettes that look good in both light and dark (for example, dark gray instead of pure black).
• Use transparent PNGs for logos so backgrounds adapt.
• Keep important text as real text (not baked into images).
• Test across inboxes in light and dark previews.

These are the only reliable controls possible directly inside the visual editor.

2. Custom HTML (Advanced)

• Custom dark mode styles: Using CSS rules that only apply when dark mode is detected (supported in Apple Mail, iOS Mail, some Outlook versions).
• Meta tags: Signals to inboxes that we’ve prepared both light and dark designs.
• Alternate logos/images: Swapping in lighter/darker versions depending on the mode (supported in some inboxes).

Best Practices for Dark Mode

Designing emails for dark mode requires careful choices to maintain readability and brand consistency. Follow these proven guidelines:

1. Do’s

• Ensure that the design is for both light and dark modes.
• Use neutral color palettes (dark gray/off-white instead of pure black/white).
• Optimize logos with transparency, outlines, or glows to stay visible.
• Keep important text as HTML text, not inside images.
• Limit yourself to two fonts for clarity and consistency.
• Lastly, test across all major inboxes in both modes before sending.

2. Don’ts

• Expect identical results across every inbox.
• Rely on pure black/white or very light pastels (they distort or look muddy).
• Bake brand text into images.
• Skip thorough testing in light and dark previews.

📘

Key Takeaways

• Dark mode is controlled by the user, not us.
• Some inboxes respect your design, others partially or fully invert it.
• Drag-and-drop editor = basic controls only (colors, logos, images, testing).
• Custom HTML = advanced controls (meta tags, dark-mode CSS, alternate assets).

Exception : The advanced techniques only work in custom HTML, not in the drag-and-drop editor, and some inboxes (like Gmail mobile and Outlook Windows) still override them with their own dark mode rules.

• Even with advanced code, not all inboxes obey. Gmail mobile and Outlook Windows will always force their inversion.