This is part of a series aimed at improving your outcomes with govDelivery emails. Keep an eye on govCommunity for more helpful and informative ideas.
Many email clients are enabled with a dark mode option, but they don’t all do it in the same way. Some support dedicated CSS stylesheets, while others have their own formula for deciding how your light-mode email should look when the subscriber chooses to see the email in dark mode. As govDelivery doesn’t currently support the CSS stylesheet method, I will focus on how you can ensure your emails will look good in either dark or light mode – and it all comes down to images.
Various potential dark mode outcomes
The main elements that can cause issues on dark mode are transparent png images. If you are using a full width flat banner graphic, this is not an issue, but if you are using a transparent png for your banner, with a colored background, you should consider adding a stroke (border) around the image that is the same color as the light mode background color. This will make the image clearly visible and readable on both light and dark mode, as demonstrated below.
Dark mode without and with a stroke around the image
Another good idea is to use higher contrast color combinations. If you choose middle tones, without a lot of contrast between the text and the background color, your automated dark mode outcomes will also likely be lower contrast.
Though it isn’t possible to control exactly how your email will look in dark mode, it is possible to make sure that it will display in a manner that is easy to read. If you have the capability to test your email in dark mode, you should run a test from time to time to make sure it looks okay and all elements are easy to read.
About the Author
Huck Tate is a govDelivery expert at Granicus, who spends much of his time helping Granicus customers design beautiful and effective email templates.
