but don’t panic! 🙃

With dark mode updates rolling out for many mail clients, we have to consider catering our emails to respect these contrast changes. I think the most important factors to consider when developing or designing your emails are:

  • Using transparent icons & logos where unwanted block backgrounds appear. However, be careful when doing so, if the icons are of lower contrast (dimmer/darker colour) they may not be fully visible.
  • Where this occurs, you can target some devices with an alternative image replacement (using hide & show). You can either replace with a dark version of the image or add a border/stroke (I found between 1-3px works best) to the image to make most or parts of it visible.
  • Sidemail.io has a great article on using light (default) & dark imagery and fallbacks. Check out the article here

👍🏼 Following the above should fix your dark mode “problems” that you’re facing with rendering and readability. If you would like to target it further and add icon and logo fallbacks see the code snippets I’ve included below.

🥠 In my opinion, I believe overriding dark styles with bright colours defeats the whole purpose of the whole ‘save our eyes’ aim that comes with dark mode. That’s also why I believe Outlook overrides colour styles very high & low contrast colours on its webmail and app dark interface…(maybe 🙄).


Code Snippets

Below are some code snippets available for you to successfully cater your emails to be readable on dark mode 😎

Apple Mail 12, iOS 13 (iPhone 11, 11 Pro)

<style type="text/css">
.apple-mail-implicit-dark-support .foo {
/* Insert your CSS styles here */
}
</style>

<body>
<div class="foo">
<!--and your HTML code here -->
</div>
</body>

Apple Mail 12 & Outlook 2019 (for macOS & Windows 10 – Dark Mode)

<style type="text/css">
@media (prefers-color-scheme: dark) {
.foo {
/* Insert your CSS styles for DARK mode here */ } }

@media (prefers-color-scheme: light) {
.foo2 {
/* Insert your CSS styles for LIGHT/DEFAULT mode here */ } }
</style>
<body>
<div class="foo">
<!--and your HTML code here -->
</div>

<div class="foo2">
<!--and your HTML code here -->
</div>
</body>

Outlook (Android, iOS & Webmail – Dark Mode)

<style type="text/css">
[data-ogsc] .foo {
/* Insert your CSS styles DARK here */
}
</style>

<body>
<div class="foo">
<!--and your HTML code here -->
</div>
</body>

A little caution when using this method as Outlook (for Android, iOS & Webmail) will tend to override your colours with its own styles so be sure to test your emails when using this method!


Need some help deciding a new colour scheme catered for dark mode? Check out this helpful online tool called Contrast Ratio. You can determine which colours are too dim or bright for dark mode. Text colours are also calculated carefully ensuring your CTA’s are readable! This can be a great help when adopting a new colour scheme relative to your current creative but for dark mode, of course!

This can be a great help when adopting a new colour scheme relative to your current creative but for the dark side, of course!

More code snippets and targets available at How to Target Email Clients 🎯
The contrast ratio tool is available online here 🎨

Be sure to subscribe to the monthly newsletter 📰 & giveaways 🎁!

The dark side!