Email technology is continually evolving, but not all advancements gain traction. So is email for dark mode more like CSS support (a good improvement) … or a little bit ‘Video in Email’ (a flaky improvement)?

A key thing to remember here is that dark mode isn’t an email specific advancement, it’s actually an OS introduction that filters through to email. So users are going to be making the switch to dark mode without necessarily thinking of how it might impact their emails…  they’ll just expect their emails to work. Much in the same way people didn’t start buying smartphones with the sole purpose of making emailing better, but they just expected their emails to still work once that decision was made – hence the introduction of responsive mobile email design.

Designing for dark mode doesn’t have to be a daunting process, there are different levels of dark mode design which you can aim for. Not everyone will need a full dark mode design for their emails - but the minimum you should ensure is that someone trusts who the email is from (visible brand logo) and no important messaging is lost (images aren’t negatively impacted by the change in background colours). The colours in your email will change, so the nice creative layout that you’ve designed which uses specific colours just won’t look the same in dark mode. Which is ok, as long as it still works as an email and no messaging is lost.

The only way to try and get the same result in light mode and dark mode is to create a very dark email in the first place. Dark colours with light text on are the least impacted by dark mode – so if your branding currently dictates that you have dark emails already, then your audience are more likely to see (pretty much) the same email regardless of what mode they’re in.

Brand colours will be the hardest to manage when designing for dark mode. Think of a brand with a really recognisable brand colour, like EasyJet. When the ‘EasyJet Orange’ is viewed in dark mode, it becomes more like ‘EasyJet Brown’ – which has a big impact on how the brand is viewed. So if you have brand colours that just have to be adhered to, then you’ll need to lock these colours into images so that they don’t change.

We’ve put together a useful list of things you should consider before you hand over your designs to a developer or client:

1. Create a standard dark mode version of your header and footer

Ideally this should be something agreed with your brand team. We recommend getting something pre-built into your design system or having a snippet of code you can use for each email. This way you won't have to worry about it for each different design.

2. Images can be saved out as transparent pngs where needed

Make sure any products, overlapping images or elements such as dividers are layered in your psd with the ability to be sliced as a transparent png.

3. Use neutral text colours for any text over background images

Remember your text will change colour whilst your background image will not. Either avoid background images where possible or pick a neutral text colour which will work in both light and dark mode.

4. Any black images are outlined in white

Any black elements you use will not show up in dark mode. So things like black text logos and social icons will need a fine white stroke added to them to show up, especially if you are not swapping them out for dark mode versions in the code. We adapted our brand logo with this in mind, check out how we did it here.

5. Animated gifs are saved out with caution

Whilst transparent pngs are great for static images in dark mode  - this can become problematic if you want to save a GIF out with transparency. This is because transparent gifs are never perfectly transparent around the edges. If you do really need a transparent animation you could consider creating an APNG but remember this is more time consuming and not supported everywhere.

6. Use an adaptable colour palette

If your images are sitting on top of background colours, think about how they will look when that background colour changes, will the design be affected?

The most important thing to consider with dark mode is that it can cause some information within emails to become lost. If your email converts badly in dark mode then at best the user will see a broken looking email yet still know what’s going on, but at worst they won’t be able to understand any of the message.

We can help you figure out how many of your subscribers are using dark mode before taking the plunge on bespoke or lengthy dark mode support. 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.