Dark Mode is now a standard of accessibility and respect for users. Between 35% and 80% of users (depending on the platform) prefer a dark interface. For instance, Litmus analytics show 41% of users, while an Android Authority survey found that among 2,500 Android owners, 81.9% use Dark Mode.
Ignoring this fact means a significant part of your audience will get a low-quality email. In this guide, we'll explain how email clients distort design, why logos disappear, and how to prepare a flawless email using the Letteros editor.
The anatomy of Dark Mode: why design gets distorted
Many people mistakenly assume the phone will just "repaint everything nicely on its own." That's not the case. Email clients use different, often aggressive, algorithms for rendering dark mode. There are three main types:
1. No Changes
The client doesn't change the email's background. The app's interface is dark, but the email itself stays bright.
- Where it happens: Some older client versions.
- Result: The design is preserved, but the email is glaringly bright.
2. Partial Color Invert
The algorithm swaps a light background for a dark one, and dark text for light. Images and colored blocks are usually left untouched.
- Where it happens: Outlook.com, Outlook 2019, Apple Mail (in some scenarios).
- Result: Design is preserved as long as graphics are prepared correctly.
3. Full Color Invert
The hardest case. The client inverts every color. Brand blue can turn yellow, and pastel pink can turn muddy green.
- Where it happens: Gmail on Android.
Result: The design can be completely destroyed.
Design hacks: how to save your visuals (no code)
Before making code changes, solve the problem at the graphics level. These three techniques fix most issues.
1. Problem: the "disappearing logo"
A black logo with a transparent background looks perfect on the email's white background. When switching to Dark Mode, the background turns black (or dark gray), and the logo disappears (black on black).
Solution:An outline: Add a white outline 1–2 pixels thick to your logo. It's invisible on a light background, but reveals the shape on a dark one.A universal color: Use a light gray shade for the logo that reads on both backgrounds.
2. Problem: "white patches"
Social icons or product photos are saved as JPGs with a white background. In Dark Mode, the email's background goes dark, but the white squares around the images stay.
Solution: Always use transparent PNGs. Crop images tightly along their outline.
3. Problem: excessive contrast
Avoid pure black #000000 for backgrounds and stark white for text. On OLED screens, high contrast tires the eyes quickly and can cause a "halo" effect (bright glow).
Solution: Use dark gray shades, such as #121212 or #1E1E1E.
Coding: media queries for design control
For full control, especially in Apple Mail and iOS, CSS tweaks are necessary. In the Letteros editor, you can add styles via an HTML block or the template settings.
Step 1. Declare support in the <head>
Tell the email client you support dark mode:
HTML<meta name="color-scheme" content="light dark"><meta name="supported-color-schemes" content="light dark">
Step 2. Set styles via CSS
Use the @media (prefers-color-scheme: dark) media query. All the styles inside it only activate in dark mode.
CSS<style> @media (prefers-color-scheme: dark) { /* Email background */.body-bg { background-color: #1e1e1e !important; } /* Text */.dark-text { color: #f5f5f5 !important; } /* Buttons */.button-style { background-color: #ff5722 !important; color: #ffffff !important; } /* Logo adaptation (show the Dark Mode version) */.light-img { display: none !important; }.dark-img { display: block !important; overflow: visible !important; float: none !important; max-height: inherit !important; max-width: inherit !important; line-height: auto !important; margin-top: 0px !important; visibility: visible !important; }}</style>
Important: what to do about Gmail on Android? This client often ignores any media queries and applies aggressive inversion. If it's critical to preserve your brand colors in a specific block (e.g. a bright banner with text), build it as a single image. Gmail doesn't invert images, and your message will reach the user unchanged.
How to check your email in dark mode in Letteros
Building the email correctly is half the job. It's important to confirm it looks right before sending. In Letteros, this takes a few seconds.
Step 1. Open the email in the Letteros editor.
Step 2. In the editor's bottom panel, find the icon with the "◑" symbol — the second icon from the left in the bottom row. Click it.
Step 3. The email switches to dark mode right in the editor. You'll immediately see how it looks in Dark Mode.
Step 4. After making edits, click "◑" again to confirm the issues are resolved.
The impact of Dark Mode on business metrics
Adapting for Dark Mode isn't just a design consideration — it directly affects results:
- Lower churn rate: An email that's easy to read doesn't cause irritation or the urge to close it.
- Brand perception: Quality coding in any mode builds trust and reads as professional.
- Improved conversion: In dark mode, bright CTA elements (buttons) draw attention even more effectively.
Checklist: preparing a campaign in Letteros
- The logo and critical icons are visible on a dark background.
- Images are in PNG format with a transparent background.
- Text has sufficient contrast (not pure white on pure black).
- You're using dark gray shades, not pure black #000000.
- Buttons preserve text readability after inversion.
Ignoring Dark Mode risks losing your audience's attention. Adapting isn't as hard as it sounds: you just need well-prepared graphics and the right coding tool. Make sure your email looks flawless in any mode.