Preguntas frecuentes
How does dark mode actually work in email clients?
Different email clients handle dark mode in three main ways. Some like Apple Mail perform a full color inversion, turning light backgrounds dark and dark text light. Others like Gmail do a partial inversion, trying to intelligently swap colors while preserving images. Some clients like older versions of Outlook do nothing at all and display your email exactly as designed regardless of the user's system setting. This inconsistency is what makes dark mode email challenging: there is no single "dark mode" standard and you need to handle the major clients differently.
What is the prefers-color-scheme media query and how do I use it?
The prefers-color-scheme CSS media query detects whether a user has their system set to dark mode and lets you apply different CSS styles accordingly. In email, you can use it inside a style tag in your email head section to override background colors, text colors, and other styles specifically when dark mode is active. The catch is that not all email clients support it. Apple Mail and the iOS mail app have good support, Gmail on iOS and Android has partial support, and Outlook on Windows generally ignores it. Writing @media (prefers-color-scheme: dark) rules is the gold standard for dark mode email control.
What colors should I avoid for dark mode compatibility?
Pure white (#FFFFFF) backgrounds are the biggest problem since they cause dramatic color inversions in clients that auto-invert. Very light grays as email backgrounds tend to invert more gracefully than pure white. Avoid white text on colored buttons since dark mode might turn the button background dark while the text stays white, making it invisible. Black text on white is actually fine in clients that do a full inversion since both flip appropriately, but the problems arise in partial-inversion clients that may change only one of those colors. Testing your specific color palette in preview tools before sending is the only reliable way to know how it will render.
How do I handle my company logo in dark mode?
The most reliable approach is using a transparent PNG or SVG for your logo with a version designed to be visible on both light and dark backgrounds. Many brands have a light version of their logo (white or light colored) and a dark version (dark text/icons). Using CSS media queries you can swap which version displays in dark mode. Alternatively, adding a subtle but dark background behind your logo image ensures it remains legible regardless of what the email client does to the surrounding colors. A white logo on a transparent background will disappear in light mode, so always think about contrast in both contexts.
Which email clients have the most dark mode users?
Apple Mail and the native iOS mail app have some of the highest dark mode adoption rates, with many estimates suggesting over 50% of Apple Mail users have dark mode enabled. Gmail on iOS and Android also has significant dark mode usage since it follows the system setting by default. Outlook on mobile has growing dark mode usage. Desktop dark mode adoption is somewhat lower but growing. For most senders, Apple Mail and Gmail mobile represent the two most important clients to test dark mode in, and they also happen to handle it quite differently from each other.
Do I need to build two completely separate email templates for dark mode?
Usually not. The most practical approach is building a single template that uses defensive color choices and CSS media query overrides to adjust key colors in dark mode. This means setting explicit dark mode background colors, text colors, and button styles in your CSS rather than relying on client-side inversion. The goal is controlled adaptation rather than complete redesign. Some highly branded or visually complex emails might benefit from significant dark mode specific work, but most email templates can be made dark mode compatible with a handful of targeted CSS overrides and thoughtful image choices.