For the month of October we are focusing on all things dark mode, so to take a bite size approach to email development we’re progressively enhancing our newsletter Email Weekly every week. Last week saw us focus on our logo and we discussed why you need a dark mode logo. This week we wanted to make sure the text in Email Weekly was exactly how we wanted it to be.

Why do I need to do anything?

Email clients that have a dark mode setting will invert background and text colors, this could mean your text will change to a color that doesn’t fit with your brand or in some cases make it un-readable - such as on top of a background image.

What can I do?

You can just leave the text to invert - if it is still legible and working, a user has chosen dark mode and may find it easier to digest your content that way. We don’t suggest trying to force your email to be exactly the same as it is in the light version - not only are you possibly making it harder for someone who has chosen dark mode, but a bright white email in a stream of dark ones could be off putting in the inbox, which could earn you a spam report or unsubscribe.

Using CSS we can target some clients and have some control over text colors. Similar to the CSS in the image swap blog post, we use the meta tags to ensure Apple Mail 12.0 will listen to our dark mode specific styling:

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

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

Then we can target email clients supporting the prefers-color-scheme, dark, media query:

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

Lastly we duplicate any styles in the media query and add the attribute selectors to target Outlook apps:

[data-ogsc] .class {...}

[data-ogsb] h1 {...}

For emailweekly and for most templates, instead of targeting each specific piece of text with it’s own class or id - we used element selectors, such as h1, p, td to control as much of the styling, with as little CSS as possible:

h1, h2, h3, p, a {

color: rgb(255, 255, 255) !important;

-webkit-text-fill-color: rgb(255, 255, 255) !important;

} 

Using the color attribute you can control the text color, then more specifically targeting -webkit-text-fill-color - the text-fill-color property has preference over just color and ensures more support across devices and in browsers than just the color attribute. 

All of the clients currently supporting dark mode change hex colors into rgb - they also check for contrast with the background color. If you specify the rgb(...) color there is a higher chance the color you are expecting will display, but hex codes, #ffffff, still work. Lastly we add !important to the attributes to override any inline color styles email clients try to add. In the end all of the text color dark mode control is quite short for emailweekly:

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

h1, h2,h3, p, a {

color: rgb(255, 255, 255) !important;

-webkit-text-fill-color: rgb(255, 255, 255) !important;

} 

[data-ogsb] h1, [data-ogsb] h2,[data-ogsb] h3, [data-ogsb] p, [data-ogsb] a {

color: rgb(255, 255, 255) !important;

-webkit-text-fill-color: rgb(255, 255, 255) !important;

}    

<!-- Make sure these are in the head of your email for applemail 12 -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

<!-- Text Color example -->
<div class="header">
      <h2 style="color:#000000;">
Hello Jay!</h2>
      <p style="color:#000000;">
      This month we have joined forces with some of our awesome email friends, to give you an abundance of exciting content for <a href="https://www.actionrocket.co/search?q=darktober" style="color: #000000;">#Darktober</a> 👏
      <br><br>
Keep your eyes peeled for blogs, podcasts, &amp; Twitter chats discussing all things <strong>DARK MODE!</strong></p>
      </div>

Throughout Darktober and into 2021 our aim is to get every brand dark mode ready. We are helping brands review how dark mode affects them from a quick review, to in depth audits. As well as supporting updating your email design systems and bespoke templates, we have you covered. Just email hello@actionrocket.co and we will be in touch.