Dark Mode Implementation in Emails

Dark Mode Implementation in Emails

What is Dark Mode?

If you use Gmail, Outlook or Apple’s Mail systems, you would have noticed the feature Dark Mode. When enabled, Dark Mode changes the appearance from a light to dark and text from dark to light. There are three main benefits of Dark Mode:

  • It is easier on the eyes preventing eye strain
  • It reduces screen brightness and preserves battery life
  • It can make it easier to read the content of an email.

Who Supports Dark Mode?

Mobile Apps

  • Apple Mail App (iOS 13)
  • Gmail App (Android 10 Q)
  • Gmail App (iOS 13)
  • Outlook App (Android 10 Q)
  • Outlook App (iOS 13)

Desktop Clients

  • Apple Mail (Mac OS Mojave)
  • Outlook Office 365 Dark (Mac OS 10.15)
  • Outlook Office 365 Dark (Win 10)

Web Clients

  • Outlook.com / Office 365 (All major browsers) – Supported in both Windows & Mac

What does Dark Mode mean for my email campaign?

Dark Mode will have an impact on the look and design of your campaigns. This means a few things need to be considered to ensure your campaign doesn’t lose appeal and attraction because your recipient is using Dark Mode.

Have images and logos optimised for both modes

For images, it’s best to use PNGs over JPGs and where possible, transparent backgrounds. These work best in Dark Mode allowing images to render correctly and lighten any text that maybe in the image

For Logos where you have a dark background or darker colours, it is best to add an outer glow or dark stroke to stop the logo blending into the dark background of Dark Mode.

Look at your font colour to ensure it will be legible in both modes

With Dark Mode, what’s dark will go light and what’s light will tend to stay light. Consider using white or light font colours, so when viewed in Dark Mode, the font will be easier to read.

2. Look at your font colour to ensure it will be legible in both modes

Test your campaigns in both modes before sending

Testing is always an important step before launch. Add into your testing process Dark Mode for both desktop and mobile to see how your campaign will render and adapt into Dark Mode.

What else can I do to improve readability in Dark Mode?

You can also add lines of code to the HTML to ensure Dark Mode readability is enabled in your campaign

<meta name=”color-scheme” content=”light dark”>

<meta name=”supported-color-schemes” content=”light dark”>

<style type=”text/css”>

:root {

  color-scheme: light dark;

  supported-color-schemes: light dark;

}

</style>

Or the following media query

@media  (prefers-color-scheme: dark)

When creating your next campaign, take into consideration your readers that use Dark Mode. If you need help with creating a Dark Mode friendly campaign, contact the TractionNext team.

Next Step

Get in touch and discover what a fully integrated digital marketing platform can do for you!

Newsletter

First Name
Last Name
Email Address

By subscribing you're agreeing to our privacy policy