Dark Mode Email Templates

The Dark Mode Challenge

Dark mode in email is more complex than on the web. Different email clients implement dark mode in different ways, and you have limited control over the rendering. Some clients fully invert colors, others partially modify them, and some offer user-controlled settings.

How Email Clients Handle Dark Mode

No Color Change

Some clients display your email exactly as designed, ignoring dark mode entirely. Apple Mail (in some configurations) and older Outlook versions work this way.

Partial Inversion

Gmail and Outlook.com change light backgrounds to dark while trying to preserve your other design choices. This is the most common behavior and often produces acceptable results without intervention.

Full Inversion

Some clients fully invert all colors, which can produce unexpected results. Dark text on dark backgrounds, invisible images with white backgrounds, and other issues can occur.

Design Strategies

Use Transparent Backgrounds

Where possible, use transparent backgrounds on images. This allows images to adapt to either light or dark backgrounds without harsh borders.

Add Subtle Borders

For images with white elements, add a subtle border or shadow. This ensures visibility against both light and dark backgrounds without looking out of place.

Test Colors in Both Modes

Check that your color choices work in both modes. Mid-tone colors often work better than extreme light or dark shades. Avoid pure white text on light backgrounds or pure black text on dark backgrounds.

CSS Media Query Support

Some email clients support the prefers-color-scheme media query, allowing you to specify dark mode styles explicitly:

@media (prefers-color-scheme: dark) {
  .dark-img { display: block !important; }
  .light-img { display: none !important; }
}

However, support is inconsistent. Do not rely on these queries as your only dark mode strategy. Use them to enhance, not enable, dark mode compatibility.

Logo and Image Handling

Provide Both Versions

For critical brand elements like logos, consider providing both light and dark versions. Use media queries to swap between them where supported, with a sensible fallback.

Add Padding to Images

White or very light images can disappear against dark backgrounds. Add padding with a contrasting color or use subtle borders to ensure visibility.

Testing Dark Mode

• Test in Gmail with dark mode enabled
• Check Apple Mail on iOS with dark mode
• Verify Outlook desktop dark mode rendering
• Use email testing tools with dark mode preview

AI-Optimized Dark Mode

Sequenzy generates templates designed to work in both light and dark modes. The AI considers dark mode compatibility when selecting colors, designing images, and structuring layouts.