Email Templates and Dark Mode

The first and most simple step you can take to optimize an existing email template for dark mode is to use suitable icons and logos. To do this, replace icons that have a white background with transparent PNGs. This stops images with a dark background from having an unsightly white box around them, and your email immediately looks a little more elegant. However, bear in mind here that the new icons shouldn’t be completely black, because if they are, they won’t be visible on a black background.

You can only achieve full optimization, though, if you consider dark mode as soon as you start creating your email design template – and think about how design decisions will affect the appearance of emails in dark mode. Choose template colors wisely. A black logo on a white background, as described above, will be invisible in dark mode. By selecting colors with a low contrast and, for example, placing a gray logo on a beige background, the image will be recognizable in an invert-color version. If you use color boxes to highlight content, you should take into account the color change in dark mode. As far as your company’s CI allows, all these aspects should be factored in and, if necessary, the template design should be adapted accordingly.

Last but not least, by using special meta tags and media queries in the CSS, you can define precisely how which color is replaced in dark mode. You can even swap one image for another using these tags. However, at the moment this only works in a few clients, one of them being Apple Mail. What’s more, it takes a lot of programming work.