Designers heading to the dark side
When it comes to digital design, Dark Mode is one of the newest challenges for digital designers and coders trying to make their emails look as good as possible. Dark Mode, also referred to as Dark Theme, is a colour scheme for digital devices that uses light-coloured text, icons, and graphical user interface elements on a dark background.
What is Dark Mode?
Some people confuse Dark Mode with Night Mode – understandable as they are similar. The key difference is that Dark Mode switches the UI background to a darker shade along with any corresponding colour scheme flips, whereas Night Mode changes the colour being emitted by the screen to a warmer colour.
Behind the Scenes
Despite being viewed as an innovation, dark mode has been around for as long as computers have. The very first monitors were green-on-black, but only because the phosphor coating on the inside emitted the greenish glow when hit with radiation.
Despite its strong link with the past, Dark Mode is now very much seen as a thing of the future. Having crept into a lot of device’s native themes, its popularity is increasing. Not only does Dark Mode save your battery, it’s also easier on the eyes, especially when using a device at night.
Although email clients do some of the hard work for you, there is still much to be done. Simple changes can make an email go from unreadable to (nearly) perfect. Here are a few basic tips:
Transparent pngs
Not using transparent images can leave hideous white boxes around the edge which can lead to the illusion of an ugly layout, logos being off-brand, or something that just doesn’t make sense.
If you have to use jpgs, for example, make sure they are not combined with the background colour, otherwise your background shade will change, but your image may not.
White strokes around dark fonts
If any of your dark text stays dark, add a white stroke to ensure visibility on a dark background. Avoiding black altogether could be a wise choice.
Use the new “prefers-color-scheme”
If you have a dark logo, you’ve probably spent all these years thinking it looks just swell in all your emails. No longer. Dark logos do not invert automatically so, chances are, in dark mode you can’t even see it. Massive negative impact for your branding.
As mentioned previously, it’s best to avoid using non-transparent background images. Luckily for us, a new media query has appeared which will let you swap out your logo for a light version in dark mode: @media (prefers-color-scheme).
Test, test, test
Make sure you test both light and dark versions of your email. In a few minutes you can make a big bug disappear. Compatibly and control is still sketchy, but thankfully it’s improving all the time.
There’s no doubt Dark Mode is here to stay and is likely to become more common with each new product update. If you’re not fully acquainted with the possibilities already, then it’s time you got up to speed.
The future is most definitely dark.
Author: Ashlee Saunders
