Jay Oram
Head of Dev
16 Oct 2020
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 #EmailWeekly each week. So far we have updated our logo and altered the text colors to ensure they are dark mode friendly. This week we wanted to take a closer look at how you can get all colours within your emails dark mode ready, and even set specific colours where possible. As we set out in our post Understanding Colors in Dark mode - email clients have added the ability for users to choose the dark mode user interface. This means that some colours in your email will change, according to their software, to make the experience better for the email recipient.
What can I do?
You can just leave the email clients to change your emails colors - only the colours set in the HTML and CSS is changed, images are left alone. (This is not an excuse to swap to all-image emails…) Test a couple of your emails in a live device or email testing software that has dark mode and see how your colors are affected. The best way to see how your colours will look, without any CSS changes or altering the code, is to run a pared down test through an email testing system or on any live devices you have set up for dark mode.
Use this sample of HTML/CSS to get started:
This small piece of code will produce a test that works across devices and looks like this:
You can then put together a sheet on all of your colors in various client dark modes:
Luckily we can use the same CSS targeting from our previous posts. 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 {...}
Adopting a similar approach to our text colours, we didn’t want to set every different element or area with a class - so we use element selectors to do the heavy lifting, using td, th and the one specific header section with it’s own class .header and that covered all areas in our template.
td, th, .header { background-color: rgb(21, 19, 18)!important;
} [data-ogsb] td, [data-ogsb] th, [data-ogsb] .header { background-color:
rgb(21, 19, 18)!important;
}
All of the clients currently supporting dark mode change hex colors into rgb - they also check for contrast with the text 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 color dark mode control is quite short for Email Weekly:
@media (prefers-color-scheme:
dark) { td, th, .header { background-color:
rgb(21, 19, 18)!important;
} } [data-ogsb] td, [data-ogsb] th, [data-ogsb] .header { background-color:
rgb(21, 19, 18)!important;
}
There are some other tricks we have seen used, but didn’t need to implement in this case - using a background-image attribute, you can set a linear gradient. As this is classed as an image it is less likely to be affected by any colour changing algorithm. You can use it in place of background-color:
background-image: linear-gradient(#e66465, #e66465);
If you set the same value twice, it is essentially a solid colour rather than gradient effect. Another trick is to use an actual image that is one colour, like a red 10x10px square and set it as a repeating background:
background-color: red; background-image: url(images/red-pixel.png);
As the default for background-repeat is repeat - we don’t need to explicitly set this in the CSS. One note with this is that Outlook and Windows 10 Mail will need the background-image set up with VML if you want to use it that way on those clients. We worked with the Taxi for Email team to create a blog post about dealing with text over background images, and how they are affected by email client dark modes.
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.