Newsletter design in dark mode

[:en]You may already be familiar with Dark Mode from your iOS or Android smartphone. In addition to the standardized settings in the current Apple software, you also have the option to activate Dark Mode in apps such as WhatsApp, Facebook, or Instagram, as well as in the Windows environment. But what exactly is behind it, and how can this setting be implemented stylishly and appealingly in online marketing and newsletter design?

What is Dark Mode?

Dark mode has become a strong trend. Backgrounds are dark, while texts and icons are displayed in lighter colors, for example. Dark mode enables an innovative and unique design that stands out clearly due to its color scheme and is perceived as pleasant by many users when viewing. But why is that? How can the positive impression that dark mode leaves on users be explained and sensibly used for your company’s email marketing?

What are the advantages of dark mode? 

Dark mode has a whole range of advantages. Thanks to white text on a dark background, our eyes are spared when reading. This advantage is also noticeable when we only use our technical devices in low light. Not only does this make it easier to read content, it also reduces the brightness of the screen. Overall, this helps to conserve the battery of mobile devices. Another advantage of dark mode is the minimalism associated with it by many users and therefore a modern design that reflects the current zeitgeist.

Why is dark mode difficult in newsletter design?

In online marketing, companies are continually seeking creative options that enable individualized newsletter design within email marketing, thereby securing the attention of recipients.

However, online marketing and newsletter design in dark mode come with some pitfalls. In principle, dark mode is supported by numerous mobile apps (e.g. Gmail app or Outlook for Android and iOS), desktop clients (e.g. Apple Mail Outlook 2019 for Mac OS and Windows) and web clients (e.g. outlook.com), but in practice an email can look very different depending on the client. One reason for this is the complex rendering of emails and the problem that an email may not look the same in the recipient's client as you originally designed it. It is therefore all the more important that you optimize your newsletters in dark mode so that common email clients display them correctly.

What specific aspects should be considered when designing newsletters in dark mode?

For an optimal display, take into account the color schemes that e-mail clients use for the dark mode of e-mails. The common clients currently use the following 3 variants for processing in dark mode.

No color change

In a number of email clients, the user interface can be converted to dark mode. Regardless of whether you choose light or dark mode, the display of your HTML email remains unchanged. This does not apply to plain text emails. Here, a 2×1 image is required to trigger dark mode. This can be easily achieved with a 1×1 tracking pixel and the use of a “text-only style”.

Invert partial color

Light background areas are recognized and inverted and therefore dark. Dark text, on the other hand, becomes light. Elements with a dark background are retained.

Full color inversion

The invasive color scheme is used here. Unlike when inverting partial colors, light and dark backgrounds are inverted here.

However, it is also possible to use your own dark mode styles. This is where the “@media (prefers-color-scheme: dark)” or the “[data-ogsc] and/or [data-ogsb]” methods are used.

With both methods, it is crucial that transparent PNGs are given a light drop shadow on dark text. This allows you to reduce problems in email clients that are not set to dark mode. It is also possible to use selected metadata in the newsletter to ensure that recipients can also read the email in dark mode.

Our tip: Would you like to learn more about dark mode styles for @media (prefers-color-scheme: dark) and double dark mode styles with [data-ogsc] and/or [data-ogsb] prefixes? Or do you prefer not to worry about the technical details at all but still want to implement online marketing and newsletter design in dark mode? Then contact our full-service agency in Munich. Simply fill out the contact form, and we will get back to you as soon as possible.