Email Dark Mode CSS

Definition

Dark mode CSS in email detects whether the recipient's email client is in dark mode and applies alternative styles. Without dark mode optimisation, emails with white backgrounds become blinding, transparent images lose their edges, and coloured text can become unreadable.

Implementation

@media (prefers-color-scheme: dark) {
  .email-body { background-color: #1a1a1a !important; }
  .email-text { color: #e0e0e0 !important; }
}

Key considerations:

• Use !important because email clients often inject their own dark mode styles
• Invert logos and images with transparent backgrounds by adding a dark-mode-specific version
• Test link colours — dark backgrounds require lighter link colours
• Some clients (Outlook, Gmail) auto-invert colours, so manually override where needed

Why It Matters

Over 30% of email opens now happen in dark mode. Emails not optimised for dark mode can be unreadable or visually jarring, reducing engagement and damaging brand perception.