Content Design Blog

On email design and content workflow

Turning to the dark mode

Should you make your email design dark mode compatible?

Turning to the dark mode

Dark mode was initially introduced for Macs (along with Apple Mail) a couple of years ago. It essentially turns the commonly light user interfaces to a dark version. Since then, it has been adapted the major mobile devices, browsers, and email clients. Besides its visual appeal for some people, dark mode is intended as an accessibility feature, designed as a way to reduce eye strain from staring at our screens all day.

Should you implement dark mode for your email design? Let's first take a look at what's involved in the implementation and how it affects your email's design.

Dark mode definitions

Implementing dark mode works similar to the way media queries work for mobile adjustments:

@media (prefers-color-scheme: dark) { }

And, because Outlook always has to be special, you’ll need to include an additional prefix for the elements you target:

[data-ogsc] h1 { }

There is also added meta tags to let platforms know that your email supports dark mode as an option:

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

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

The meta tags are where you you specify which versions of your email are available. This means that even if you don't support dark mode, it would be good to declare light as the only option. Some platforms actually force dark mode by automatically inverting background colors and text. This should help signal them to not do that.

Dark mode design

It shouldn’t be just about inverting a white background to black, and black text to white. The goal to keep in mind is to reduce eye strain. And there are different ways to do that:

Obviously, the potentially drastic color shift can affect design considerably. You'll need to consider whether it works with your current design aesthetic and branding and which of the above makes sense to implement.

Dark mode decision

To decide on dark mode, it helps to put it into proper context in relation to your design. How does it fit into your other accessibility considerations? Does it make sense to your organization's brand? Would in enhance your audience's experience with your emails?

If you decide to implement dark mode into your email templates, you can now preview and build your emails in dark mode using Blocks Edit. And you can take a look at our updated Starter template for an example of dark mode code.

Photo of Ovi Demetrian Jr By Ovi Demetrian Jr

Share this post

Tweet | LinkedIn post | Facebook post | Email a team member