Black text, white background. That’s been the go‑to colour scheme on websites and emails for a long time. After all, it emulates the printed typography of a book or newspaper.
But a digital display isn’t a piece of paper. That’s why some bright spark came up with the idea of dark mode – an inversion of the default colour schemes of old. And there’s a point to it beyond ‘because we can’. Light text on a dark background is easier on the eye, especially in a dimly‑lit environment. It’s also easier on battery life. Whereas ink comes with a material cost in physical media, light comes with an energy cost on a screen.
The use of dark mode is entirely optional. You can generally switch from light to dark whenever you like, or set your device to react automatically based on light conditions. Most modern operating systems, lots of applications and some websites cater for dark mode.
We’re not here to talk about any of those. Email is our thing. Let’s take a closer look at how dark mode affects email, how to design for it, and how to code for it.
Don’t be afraid of the dark
There’s an important point to set down from the outset: the objective is to optimise your emails for dark mode, not to override your reader’s settings.
That means we all need to be flexible with our brand guidelines. Whether your customer has a visual requirement for dark colours or simply prefers them, user prerogative trumps everything else.
Discover the dark mode landscape
Rendering quirks and the tricks to get around them are at the heart of email development. The handling of dark mode maintains these traditions.
Some email services allow full control – you get to set the dark mode colouring. Others ignore your styling and force a dark colour scheme of their own. Some offer partial control, and a few don’t support dark mode at all. The challenge is to design and code an email that looks good on all of them.
It’s important to note that those services which apply their own dark mode colours are not a lost cause. You can and should still optimise your design so that they look as good as possible. Familiarity and consistency ward off unsightly surprises and the wasted time of trial & error.
Don’t be vexed by text
Warning: please excuse the rant‑like nature of this paragraph. It’s frustratingly common in email to see images used to display copy. There has never been a convincing reason to do so. Images‑of‑text instead of actual text is often a way to foist a brand font or elaborate design on users. And one that comes at the expense of accessibility, usability and best practice.
Dark mode is one more reason to use text. Image‑based text can lead to a messy, partially inverted email in dark mode. Real text puts the email developer in the driving seat. Some email services support web fonts, so it’s still possible to show brand fonts to a reasonable percentage of your audience. Other accounts will fall back to standard fonts of your choice.
Let’s be (partially) transparent
Email supports a handful of image formats. JPEGs are common, and best‑suited to photographic content such as product shots. GIFs are also popular, and handy for simple images such as icons, or for short animations.
Somewhat less widely used are PNG images. Which is a pity, because their built‑in transparency support is a dark mode designer’s best friend. Let’s take a logo as an example. Save your logo as a JPEG and it could end up sitting in an unsightly white box against a dark background. Utilise the PNG format instead and it’ll automatically let the background colour shine through. If your logo itself is dark, it could be lost against a darkened background. A white outline or glow effect – invisible on light mode – can counteract that.
It’s worth noting that GIFs also have a transparency capability… but it’s limited. It’s an all‑or‑nothing deal – a single colour can be set as fully transparent. While that can be useful in some situations, it doesn’t allow for the smoothly‑blended curves of a PNG.
Code for the mode
It’s time to get coding. First up, you need to explicity enable dark mode in email. That’s a two‑step process. Add the following HTML <meta> tags in the <head> of your document:
<meta name="color‑scheme" content="light dark">
<meta name="supported‑color‑schemes" content="light dark">
And then create a new <style> sheet, separate from your existing responsive styles. Now add a couple of root selectors to define light and dark mode:
:root {
color‑scheme: light dark;
supported‑color‑schemes: light dark;
}
These colour modes can now be targeted via media queries. Not only does that mean you can set up specific custom colours for dark mode, you can even swap images.
@media (prefers‑color‑scheme: dark) {
.email‑background {
background‑color: #313336 !important;
}
.darkmode‑show {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max‑height: inherit !important;
max‑width: inherit !important;
line‑height: auto !important;
margin‑top: 0px !important;
visibility: inherit !important;
}
.darkmode‑hide {
display: none !important;
}
}
There’s an important reminder in that prefers‑color‑scheme syntax! We should always bear in mind that light or dark mode is a user preference.
Give it a go
We could go on about the technicalities of dark mode all day. But let’s now put it to the test.
Below is a simulated email. It’s interactive – try the controls to see how it looks in various states of light and dark mode.
Note: this demo approximately simulates light and dark conditions in email. Specific email services and devices will have their own rendering quirks. This simulation is set to automatically disable the use of swapped images on forced dark mode, so some switches will be tripped automatically.
Simplicity keeps things… simple
The more complex the design, the more work will be involved in making it dark mode‑friendly. That raises a question: is that design essential, or can it be stripped back? I like to find the answer in a second question: does the design help to relay information to the customer, or is it a box‑ticking exercise for the marketing department?
In light of that way of thinking, the best solution is often to simplify the design rather than piling on more and more CSS code.
Final thoughts
Dark mode is a good thing. It’s a piece of functionality in the spirit of accessibility and respects the user’s autonomy.
As with all things development, you don’t need to work from scratch every time. An email template and snippet‑based coding style mean consistent results.
Despite that, surprisingly few companies are actively supporting dark mode in email or even the web. By designing for dark mode, you are helping to lead the way.
Perhaps it isn’t light work, but it’s definitely the right work.