There are some challenges to ensuring brand & design consistency between light & dark mode across email clients.

We’ve experimented with a lot of techniques/tricks/hacks here and while there are certainly ways to improve rendering and color control, support is inconsistent which makes cross-client support difficult.

Ultimately, we feel that this combination of techniques can enhance consistency across clients while respecting dark mode preferences:

1. Logo color: use either grey or a colorful brand color that works on both light/dark surfaces
2. Image stroke: apply a stroke to the logo that matches the light-mode email background
3. Dark mode optimization: Progressively enhance clients that support prefers-color-scheme with a specific dark mode logo

1. Logo color

Some clients (for example, Gmail on Android 14) automatically invert images under ~50px if they detect that the image should be inverted to maintain a good contrast ratio in dark mode. This appears to be relatively new behavior, so older versions of Gmail on Android would keep the original image instead.

Most often, clients will keep the image you supply in dark mode. Therefore, the base image that you use should be either grey or another “dark & light mode safe” color to maximize legibility. You want to prevent the scenario where you end up in dark mode with a black logo that can’t be seen.

Starting from this technique means that you rely less on the enhancements that come next. Your image should be legible in almost all dark-mode clients.

2. Image stroke

It might be the case that if you choose to start with a grey logo, you’d prefer to stay close to black on the color spectrum. Alternatively, maybe using grey is not in the cards for some reason so you’d prefer to only have a black logo.