Dark mode, black mode, dark theme, night mode, light-on-dark-colour-scheme… all different ways to name a “little” feature that has had a major impact on the marketing email design world. Dark mode is a colour scheme that reverses what we typically see in email design and uses light coloured elements on a dark background.
We’re sure you’ve already heard of it or maybe you even use this feature yourself, but here’s a quick run down of what it’s all about and some things that every marketer should know when it comes to designing emails in dark mode.
What is dark mode and why do people use it
Dark mode is a reverse colour scheme using light text and image elements on a darker background. This feature was first introduced as a means to conserve battery life and energy consumption in as early as 2018. YouTube launched an optional dark theme shortly after and since then we’ve seen in influx of new dark mode themes in a variety of platforms entering the scene.
In addition to conserving energy, dark mode is said to be easier to read and reduces eyestrain. It seems like this is a great feature however the reduction in user eyestrain has come with an even bigger headache for email marketers.
How does dark mode affect your emails?
Unfortunately handling dark mode isn’t as easy as it may seem. There are various mobile apps, desktop and web email clients that support a dark mode theme, however they aren’t all handled consistently. This means that a one-size-fits-all approach won’t work when designing for dark mode. An email that looks great in one client might look completely different in another.
There are three main ways that dark mode themes affect your emails:
1) No colour changes: this means that although the interface of the email client can switch to a dark mode theme, the actual email is not affected. Note however that plain-text emails will trigger the dark mode theme here.
2) Partial colour invert: This method detects areas that are light and inverts them so that any light background becomes dark and any dark text becomes light. This method generally leaves already dark backgrounds alone so your email design is only partially changed.
3) Full colour invert: This scheme inverts all areas both light and dark. So if you have a dark scheme email, email clients using this method (such as gmail) will switch the entire theme to light and vice versa.
Ways to work around Dark Mode alterations
There are a few ways we can work around this new feature.
Translucent logos, iconography, images, etc.
One way to work around dark mode is to add a translucent outline to transparent PNGs so that when dark mode is triggered, darker logos or images don’t get lost.
Images with backgrounds
If you have images with backgrounds, make sure there is enough padding around the image so that the focal point doesn’t get lost. If you have multiple images that are supposed to be the same size, make sure that the reverse will ensure that they size continues to appear consistent.
Add code where appropriate
Add code to support turning on dark mode for clients that have enabled this feature.
Plain-Text emails
Creating plain-text emails can ensure a unified look throughout the email. This option may not render perfectly but it can ensure a better viewing experience than a highly visual HTML email version.
Respect the user
Don’t forget to respect the end user. Alter as necessary to keep the integrity of your emails are in tact, however don’t go so far so that the users that have chosen to enable the dark mode feature are then not getting that same experience with your email.
Test, test, and did we say test?
The way emails render in dark mode is constantly changing so make sure that you are testing your emails before deployment to confirm that they are rendering to your liking. Using a vendor like Litmus who can support QA in a variety of clients can safeguard you for the most optimal viewing experience for your end customer.
Here at Sensible Marketer, we can ease your dark mode headaches. We design html emails to work on all platforms, as well as branded templates in drag and drop editors.
Contact us today if you’re looking to build easy to use templates or execute on html emails that look great across the board in any of these email tools.
