Design: Building for a Dark Mode world.
Over 50% of users now read their email in dark mode. If your design isn't optimized for this, your beautiful templates will look broken, unreadable, or just plain ugly.
How dark mode actually works
Email clients handle dark mode in different ways. Some, like Apple Mail, simply change the colors of the interface. Others, like Gmail and Outlook, will actively reach inside your email and invert your colors. This is the biggest challenge for designers.
When a client inverts your colors, it looks for light backgrounds and turns them dark. It looks for dark text and turns it light. This can create unexpected results, especially with brand-specific colors that don't invert gracefully.
You have to assume that any color you choose for your background or text might be changed by the user's device. This is why testing in multiple clients is more important now than ever before.
The problem with transparent images
Transparency is a staple of modern design. But in a dark mode email, a transparent PNG can become your worst enemy. If you have a dark logo on a transparent background, it will look great on a white background. But when the email client turns that background dark, your logo will vanish.
The common solution is to add a small white outline or a subtle glow around your dark assets. This is invisible on a white background but ensures that the logo remains clear when the environment turns dark.
Never export your logos with a solid white background box. It looks unprofessional in dark mode. Always use transparency and add a "halo" or stroke around dark elements instead.
Optimizing logos and icons
Icons are especially prone to dark mode issues. Small, thin-line icons can easily get lost in a dark background. We recommend using slightly thicker strokes for icons used in email templates.
Another trick is to use two different versions of your assets and swap them using CSS, although this doesn't work in every email client. For the most part, a single, well-optimized asset with a subtle outline is the most robust solution.
Using CSS to take control
If you want to be a professional email designer, you need to understand media queries. Specifically, the `prefers-color-scheme: dark` query. This allows you to write specific styles that only apply when the user has dark mode enabled.
@media (prefers-color-scheme: dark) {
.dark-text { color: #ffffff !important; }
.dark-bg { background-color: #1a1a1a !important; }
}
While not all clients support this, many of the most popular ones do. By using this query, you can manually set your dark mode colors instead of letting the email client guess. This gives you much more control over how your brand is represented.
Remember to use the `!important` tag on these styles to ensure they override the default inversions made by the email client.
Accessibility and contrast
Dark mode is often used because it's easier on the eyes, especially in low-light environments. But if your contrast is too low, it becomes even harder to read than light mode.
Always check your color combinations using an accessibility tool. Ensure that your text remains clear and readable even after the client inverts it. Avoid using pure black or pure white for large blocks of content. Subtle off-blacks and off-whites are much more comfortable for the reader.
Summary
Building for dark mode isn't just a trend; it's a requirement for modern email marketing. You need to understand how clients invert colors, how to optimize your images, and how to use CSS to take control of the experience.
A great email looks good in light mode. A perfect email looks good in both. Take the extra time to test your designs and your audience will thank you for it.