Dark mode has become increasingly popular in both apps and email clients, offering a more comfortable viewing experience. In fact, 82% of smartphone users now report favoring dark mode.
Optimizing your emails for dark mode can be complicated. As different email clients support dark mode to varying extents, it’s crucial to ensure your marketing emails remain visually appealing and easy to read, regardless of the recipient’s inbox settings.
Which email clients support dark mode?
While some clients automatically invert colors, others require HTML styles that specifically cater to the dark mode experience.
Here’s how some popular email clients adapt the appearance of emails for dark mode users:
- Apple Mail: Automatically converts white backgrounds to black and text to white.
- Outlook: Offers both a light and a ‘night’ dark mode.
- Gmail: Will adjust to dark mode if the user sets it, but the implementation can be inconsistent.
How can you optimize your emails for dark mode?
Like most areas of marketing, it’s a good idea to start by understanding your audience. In this instance, you should understand which email clients your subscribers use most frequently. Then you can tailor your dark mode email designs accordingly.
While each email client handles dark mode differently, there are some best practices to follow:
Optimise logos and icons
Do you have a dark-colored logo? Add a thin white border to ensure it stands out in dark mode. Or play it extra safe and create two versions of your logo—one for light mode and one for dark mode.
It’s also essential to use contrasting social icons so they’re visible in dark mode.
Use transparent backgrounds
Although JPGs may be your usual go-to for emails thanks to their quicker load times, PNGs are your best bet for dark mode. Their transparent backgrounds will ensure you aren’t left with unsightly white boxes around your images.
Increase padding around non-transparent images
Sometimes including non-transparent images in your emails is unavoidable. But don’t worry, improving their appearance can be as simple as adding some padding around them. This helps to create a smooth adjustment between the image’s background and the dark mode setting.
Opt for text
Although we’ve covered some best practices for adjusting images in emails for dark mode, it’s still always best to opt for text instead of images, whenever possible. This increases the likelihood of your content being easy to read and also helps improve deliverability and accessibility.
Use fewer colors
Certain colors that work well in light mode may not look as good in dark mode, so it’s best to stick to a limited color palette. That way, there are less likely to be any nasty surprises when certain email clients automatically adjust it for dark mode. It will also ensure that the email aligns more closely with the light mode version.
Test, test, test!
As each client supports dark mode in different ways (and to varying degrees), you should always be sure to test how your email appears across multiple email clients and devices, and in both light and dark mode.
There’s a light at the end of the tunnel
While it can be difficult to create emails that look great across all email clients and in both light and dark mode, getting it right can have a real positive impact on your email deliverability and engagement.
The good news is that by making some of the changes outlined above, you’ll be well on your way to providing a great user experience for all of your email subscribers. Plus, if you’re a Yotpo Email user, then you can make the most of our ready-made social blocks that include a variety of social icons optimized for dark backgrounds. We also offer robust guidance on how to optimize your emails for dark mode, so you can create the best-looking emails every time.
