This information mostly relates to email clients that do not support dark mode editing. In those that do support it, you have more control over how your email will look in dark mode. Find out more about dark mode editing here.
Logos
The background behind each of your images is going to change in Dark Mode, generally from light to dark, although it will depend on the colors in your email design.
But no matter what, if you have a solid background color baked in to your image, it’s almost certainly going to become visible when your email is displayed in Dark Mode.
For example, you may have a logo that looks great on a white background like this:
Our logo looks great in Light Mode.
However if the white background is actually baked into the image file, it will become visible in Dark Mode when the background is adjusted from light to dark mode.
In Dark Mode, any solid white background that is physically part of the image becomes visible.
In some cases it may be better to make your logo transparent and save it as a transparent PNG. However if parts of your logo are also dark, this may result in too little contrast in Dark Mode:
Making our logo transparent introduces new problems, because the dark text would now clash with a dark background.
If this is the case for your image, you may need to apply a white background to it in such a way that it looks more intentional in dark mode.
You should still save this image as a transparent PNG, but ensure that the white portion is a part of the image.
Adding a graphical white panel behind our logo, and still saving it out as a transparent PNG, means we solve both problems. The logo will look exactly as it used to in light mode, and the hard edges of your background will only become visible when the background color changes.
You can get even get creative with this by hiding some details that only become visible when the lights go out.
Photos and images
The same goes for photos where you have included a solid background color. They might look fine in Light Mode, but they won’t in Dark Mode:
Our image looks great in Light Mode. In Dark Mode, any solid white background that is physically part of the image becomes visible.
You can either set your image up to be transparent as shown below or if that’s not possible, then at least try to create a bit of breathing room around the edges of your image, so that it looks more intentional, as shown below right.
or if that’s not possible, then at least try to create a bit of breathing room around the edges of your image, so that it looks more intentional, as shown below.
