Skip to main content

Dark Mode for Email Templates

Dark mode has become increasingly popular across email clients, with many users preferring the reduced eye strain and battery savings it provides. Creating email templates that look great in both light and dark modes requires careful consideration of colors, images, and CSS techniques.

Understanding Dark Mode in Email​

When dark mode is enabled, email clients attempt to automatically adjust your email's colors to provide a dark background with light text. However, different email clients handle this transformation differently, which can lead to unexpected results if not properly managed.

How Email Clients Apply Dark Mode​

Email clients use three main approaches to apply dark mode:

  1. Full Color Inversion: Some clients invert all colors completely
  2. Partial Color Adjustment: Others selectively adjust certain colors while leaving others unchanged
  3. No Changes: Some clients respect your original design and don't apply any dark mode transformations

CSS Media Queries for Dark Mode​

The most reliable way to control how your emails appear in dark mode is by using the prefers-color-scheme media query. This allows you to define specific styles that only apply when dark mode is active.

Basic Dark Mode Media Query​

@media (prefers-color-scheme: dark) {
  /* Dark mode styles go here */
  .email-container {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }
  
  .text-primary {
    color: #b3d9ff !important;
  }
  
  .button {
    background-color: #4a90e2 !important;
    color: #ffffff !important;
  }
}

Targeting Both Light and Dark Modes​

/* Light mode (default) */
.email-container {
  background-color: #ffffff;
  color: #333333;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  .email-container {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
  }
}

Mail User Agent (MUA) Specific CSS​

Different email clients require specific approaches to ensure consistent dark mode rendering. Here's how to handle the most popular email clients:

Apple Mail (iOS & macOS)​

Apple Mail provides excellent support for the prefers-color-scheme media query and respects most dark mode CSS.

@media (prefers-color-scheme: dark) {
  /* Apple Mail specific dark mode styles */
  .apple-mail-container {
    background-color: #000000 !important;
    color: #ffffff !important;
  }
  
  /* Fix for transparent images */
  .logo-image {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px;
  }
}

Gmail (Web & Mobile)​

Gmail has limited support for dark mode CSS and often applies its own color transformations. Use these techniques:

/* Gmail-specific dark mode meta tag (add to <head>) */
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

/* CSS for Gmail dark mode */
u + .body .gmail-hide-dark {
  display: none !important;
}

u + .body .gmail-show-dark {
  display: block !important;
}

/* Prevent Gmail from inverting certain elements */
.gmail-no-invert {
  background-color: #ffffff !important;
  color: #000000 !important;
}

Outlook (Desktop & Web)​

Outlook has varying levels of dark mode support across versions. Use these approaches:

/* Outlook.com and new Outlook */
[data-ogsc] .outlook-container {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* Outlook desktop (Windows) */
@media (prefers-color-scheme: dark) {
  .outlook-desktop-dark {
    background-color: #111111 !important;
    color: #ffffff !important;
  }
  
  /* Force white background for certain elements */
  .outlook-light-bg {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
}

Yahoo Mail​

Yahoo Mail requires specific attribute selectors for dark mode:

/* Yahoo Mail dark mode */
@media (prefers-color-scheme: dark) {
  .yahoo-container {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
  }
}

/* Yahoo-specific attribute selector */
[class*="yahoo"] .content-block {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

Samsung Mail​

Samsung Mail on Android devices has its own dark mode implementation:

@media (prefers-color-scheme: dark) {
  /* Samsung Mail specific */
  .samsung-dark-mode {
    background-color: #000000 !important;
    color: #ffffff !important;
  }
  
  /* Prevent color inversion on images */
  .samsung-image-fix {
    opacity: 0.99;
  }
}

Advanced Dark Mode Techniques​

Using CSS Custom Properties​

CSS custom properties (variables) can make dark mode implementation more maintainable:

:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
  --text-secondary: #666666;
  --accent-color: #007bff;
  --border-color: #dddddd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --text-primary: #f0f0f0;
    --text-secondary: #b0b0b0;
    --accent-color: #4da3ff;
    --border-color: #444444;
  }
}

/* Use the variables throughout your styles */
.email-body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

Handling Images in Dark Mode​

Images can be problematic in dark mode, especially logos with transparent backgrounds:

/* Add white background to transparent logos */
@media (prefers-color-scheme: dark) {
  .logo-container {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    display: inline-block;
  }
  
  /* Use different images for dark mode */
  .light-mode-only {
    display: none !important;
  }
  
  .dark-mode-only {
    display: block !important;
  }
}

/* Hide dark mode images in light mode */
@media (prefers-color-scheme: light) {
  .dark-mode-only {
    display: none !important;
  }
}

Dark Mode Color Considerations​

When choosing colors for dark mode, consider these guidelines:

@media (prefers-color-scheme: dark) {
  /* Background colors */
  .bg-primary { background-color: #121212 !important; } /* Pure black can be harsh */
  .bg-secondary { background-color: #1e1e1e !important; }
  .bg-tertiary { background-color: #2a2a2a !important; }
  
  /* Text colors */
  .text-primary { color: #ffffff !important; } /* Full white for primary text */
  .text-secondary { color: #b3b3b3 !important; } /* Slightly dimmed for secondary */
  .text-muted { color: #808080 !important; } /* Muted text */
  
  /* Accent colors - increase brightness */
  .text-link { color: #4da3ff !important; } /* Brighter blue for links */
  .text-success { color: #4caf50 !important; } /* Adjusted green */
  .text-warning { color: #ff9800 !important; } /* Adjusted orange */
  .text-danger { color: #f44336 !important; } /* Adjusted red */
  
  /* Border colors */
  .border { border-color: #404040 !important; }
}

Testing Dark Mode​

Email Client Testing Matrix​

To ensure your dark mode styles work correctly, test across these email clients:

  1. Apple Mail (iOS 13+, macOS 10.15+)

    • Test on iPhone and Mac
    • Check both light and dark system settings

  2. Gmail (Web and Mobile)

    • Test Gmail web with browser dark mode
    • Test Gmail mobile app dark mode

  3. Outlook (Various versions)

    • Outlook.com web
    • Outlook desktop (Windows)
    • Outlook mobile (iOS/Android)

  4. Yahoo Mail

    • Web version with dark theme
    • Mobile app

  5. Samsung Mail

    • Android devices with dark mode enabled

Preview Testing Tips​

  1. Use System Settings: Toggle your device's dark mode to test
  2. Browser Extensions: Use dark mode simulators for web testing
  3. Email Testing Tools: Services like Litmus or Email on Acid provide dark mode previews
  4. Real Device Testing: Always test on actual devices when possible

Best Practices​

1. Always Provide Fallbacks​

/* Default light mode styles */
.content-block {
  background-color: #ffffff;
  color: #333333;
}

/* Dark mode override with !important */
@media (prefers-color-scheme: dark) {
  .content-block {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }
}

2. Use Semantic Color Names​

Instead of using color-specific class names, use semantic names that make sense in both modes:

/* Good */
.text-primary { color: #333333; }
.bg-surface { background-color: #ffffff; }

/* Avoid */
.text-black { color: #000000; }
.bg-white { background-color: #ffffff; }

3. Test Contrast Ratios​

Ensure your dark mode colors meet WCAG accessibility standards:

4. Consider Partial Dark Mode Support​

Some email clients only partially support dark mode. Design with this in mind:

/* Base styles that work in both modes */
.universal-block {
  background-color: #f0f0f0;
  color: #333333;
  border: 1px solid #cccccc;
}

/* Enhanced dark mode for clients that support it */
@media (prefers-color-scheme: dark) {
  .universal-block {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #555555 !important;
  }
}

5. Document Your Dark Mode Strategy​

Include comments in your templates to help maintain consistency:

/* 
  Dark Mode Color Palette:
  - Primary BG: #1a1a1a
  - Secondary BG: #2a2a2a
  - Primary Text: #ffffff
  - Secondary Text: #b3b3b3
  - Accent: #4da3ff
  - Borders: #404040
*/

Troubleshooting Common Issues​

Images Appearing Inverted​

@media (prefers-color-scheme: dark) {
  /* Prevent image inversion */
  img {
    opacity: 0.999; /* Tricks some clients into not inverting */
  }
  
  /* Or force white background */
  .image-container {
    background-color: #ffffff !important;
    padding: 10px;
  }
}

Text Becoming Invisible​

/* Ensure text remains visible in all modes */
.safe-text {
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  .safe-text {
    color: #ffffff !important; /* Force white in dark mode */
  }
}

Buttons Losing Contrast​

/* Button with good contrast in both modes */
.cta-button {
  background-color: #007bff;
  color: #ffffff;
  border: 2px solid #007bff;
}

@media (prefers-color-scheme: dark) {
  .cta-button {
    background-color: #4da3ff !important;
    color: #000000 !important; /* Dark text on light button */
    border-color: #4da3ff !important;
  }
}

Summary​

Creating effective dark mode email templates requires understanding how different email clients handle dark mode, implementing appropriate CSS media queries, and thoroughly testing across platforms. By following these guidelines and using MUA-specific CSS when needed, you can ensure your emails look professional and remain readable regardless of the user's color scheme preference.

Remember to always test your templates in actual email clients, as rendering can vary significantly between platforms. With careful planning and implementation, your emails can provide an excellent experience for all users, whether they prefer light or dark mode.