Definition
Dark mode is a display setting that uses light-coloured text on a dark background instead of the traditional dark-on-light scheme. Most modern operating systems and email clients now support dark mode, and approximately 30-40% of users enable it depending on the platform and time of day.
For email marketers, dark mode presents design challenges. Email clients handle dark mode differently — some invert colours automatically, some apply custom dark themes, and some leave the email unchanged. An email designed only for light mode can appear unreadable, distorted, or unprofessional in dark mode.
How Different Email Clients Handle Dark Mode
| Email Client | Dark Mode Approach |
|---|---|
| Apple Mail (iOS/macOS) | Smart invert — inverts colours but preserves images and detects dark backgrounds |
| Gmail (Android/iOS) | Applies custom dark theme by inverting colours and backgrounds |
| Gmail (web) | No dark mode support in the browser interface |
| Outlook (iOS/Android) | Full colour inversion of all email content |
| Outlook (desktop) | No dark mode support in classic Outlook. New Outlook supports it. |
| Yahoo Mail | Custom dark theme with background and text adjustments |
| Proton Mail | Custom dark theme that respects email colour choices |
CSS Strategies for Dark Mode in Email
The primary technique for controlling dark mode appearance is the prefers-color-scheme media query, which detects the user's system dark mode preference. However, Gmail strips <style> tags in the <head>, so a hybrid approach is needed.
@media (prefers-color-scheme: dark) {
.email-body { background-color: #1a1a1a !important; }
.email-text { color: #ffffff !important; }
.dark-hide { display: none !important; }
.dark-show { display: block !important; }
}
| Technique | Description |
|---|---|
| prefers-color-scheme media query | Targets dark mode in Apple Mail and other supporting clients |
| Meta colour theme tag | <meta name="color-scheme" content="light dark"> tells the client the email supports both modes |
| Inline dark mode colours | Use inline styles with dark mode overrides for clients that strip <style> tags |
| PNG images with transparent backgrounds | Avoid white background boxes around logos and icons |
| Dark mode specific images | Use a dark-mode class to swap images between light and dark variants |
Dark Mode Design Best Practices
- Test in multiple clients: An email that looks perfect in Apple Mail dark mode may be unreadable in Outlook mobile. Test across Gmail, Apple Mail, and Outlook at minimum.
- Avoid pure white backgrounds: Use off-white (
#f4f4f4) or light grey instead of pure white. Inverted, pure white becomes pure black, which can look harsh against other colours. - Use transparent PNGs for logos: A logo with a solid white background box will look jarring in dark mode. Export logos with transparent backgrounds so they work in both modes.
- Set background colours explicitly: If you do not set a background colour, the email client will decide one for you. Set
background-coloron all major containers to maintain control. - Avoid colour-only indicators: Do not rely solely on colour (e.g. red text for errors) to convey meaning. In dark mode, colour contrast ratios change, and some colours become unreadable.
Related Glossary Terms
A/B Testing
A/B testing in email marketing is the practice of sending two variations of an email to a small sample of your list to determine which version performs better before sending the winner to the remaining subscribers.
Abandoned Cart Email
An abandoned cart email is an automated message sent to customers who added items to their online shopping cart but left without completing the purchase. It is one of the highest-converting email types in ecommerce.
AMP for Email
AMP for Email is a Google-developed framework that allows email messages to include interactive elements like forms, carousels, accordions, and live content. It turns static emails into dynamic, interactive experiences directly inside the inbox.
CAN-SPAM Act
The CAN-SPAM Act is a US law that sets rules for commercial email. It requires accurate subject lines, a physical address, a clear opt-out mechanism, and prompt processing of unsubscribes. Violations can result in penalties up to $51,744 per email.
Click-Through Rate
Click-through rate (CTR) is the percentage of email recipients who clicked one or more links in your email campaign. It measures how compelling your content and call-to-action are.
Click-to-Convert Rate
Click-to-convert rate measures the percentage of email clicks that result in a desired conversion action such as a purchase, signup, or download. It shows how effective your post-click experience is at turning interest into results.
Frequently Asked Questions
No. Dark mode does not affect tracking pixels. Whether the email is viewed in light or dark mode, the tracking pixel fires normally when images are loaded. However, if the recipient uses dark mode and has images disabled by default, the pixel will not fire until they enable images.
Not necessarily. A single hybrid email that handles both light and dark mode is the standard approach. Use `prefers-color-scheme` media queries with fallback colours for clients that do not support them. Some brands create separate versions for critical campaigns, but this doubles production time.
Outlook on iOS and Android performs full colour inversion, which tends to produce the worst results. It inverts everything including images and brand colours, which can make logos look strange. Gmail's custom dark theme also strips some CSS, making it challenging for complex layouts.
Dark mode affects plain text emails less than HTML emails. Most email clients handle plain text appropriately by adjusting the text and background colours. However, if you include images, links, or any HTML formatting in otherwise plain-text emails, dark mode can still cause issues.
Use email testing tools like Litmus, Email on Acid, or Testi@ that include dark mode previews across multiple clients. You can also test manually by enabling dark mode on your device and sending test emails to Gmail, Apple Mail, and Outlook accounts.