Use the Force to fight the Dark Mode…

"The dark side clouds everything. Impossible to see the future is." - Yoda

The tech industry started buzzing when Apple introduced its Dark Mode feature in 2018. One year later, this feature became available on most email platforms, such as iOS Mail and Gmail.

Dark Mode relies on a darker color palette, making the interface more suitable for work in low-light environments or at night. Recently, more users are choosing Dark Mode for its aesthetic appeal and reduced battery usage. According to Litmus’ Email Client Market Sharean average of 35% of email opens tracked in 2022 used Dark Mode.

A Challenge For Email Marketers

Creating consistent-looking campaigns has become difficult due to the varying implementations of Dark Mode across email clients.

There are three main ways email clients handle Dark Mode: 

1️⃣ No Color Changes: Some clients (like Apple Mail and Gmail Desktop) do not alter email appearance based on Dark Mode.

2️⃣ Partial Color Invert: Only light backgrounds are darkened, leaving dark backgrounds unchanged. This method is used by Outlook.com and others.

3️⃣ Full Color Invert: Both light and dark backgrounds are inverted, often disrupting design. This is common in Gmail app (iOS) and Outlook 2021 (Windows).

Use The Force...

If your campaigns mostly feature images, you're in the clear. The problems start when you use text or images with transparent backgrounds. In these cases, some platforms might invert your colors, messing up the entire look and feel.

Here are a few tips to avoid Dark Mode distortions:

📸 Optimize Logos and Images:

Add a translucent outline to transparent PNGs with dark text to improve readability in email clients with limited Dark Mode customization.

Use transparent backgrounds and light translucent elements in logos for a seamless look in Light Mode and a special touch in Dark Mode.

Ensure non-transparent images have enough padding around focal points to avoid awkward placement.

Keep Your Text Content as Black Text on a White Background: An easy solution is to use black text on a white background. It may limit your design a bit, but you can still get creative with the areas around the text.

💯 Always Be Testing: Regularly test your emails in different clients to ensure compatibility and see how they appear in various modes. This proactive approach helps maintain legibility and enhances the overall subscriber experience.

Dark Mode is a significant advancement in accessibility and user preference, so it's best to embrace it rather than resist it. As Yoda said, "Once you start down the dark path, forever will it dominate your destiny."🤓 However, even though we know image-heavy emails can hurt deliverability, some designs are meant to be seen as originally intended. 

PD: We assure you this email is Dark Mode approved 😎.

Back to blog