CODEWITHSUNDEEP
html-emailemail-templates
Anna-Ha
Anna-Ha

Reputation: 55

the best way to handle dark mode logos in html emails

am designing a html email template that supports dark mode for all email clients but am facing a problem with the logo.

The logo is a black .png image and the default/light background is white, so in dark mode it becomes black over black. Adding an outline to the logo is not an option, using 2 images with classes and controlling which one to display using media queries won't work for Gmail ios and some outlook versions, so am left with three choices but am not sure wither they are applicable and supported by all famous clients:

  1. forcing the white background by using a gradient as the background-color value instead of a hex value
  2. using this method that I found online for webpages:
<picture>
  <source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
  <img src="light-image.png">
</picture>
  1. using an SVG instead of the image so the fill color will change.

So, are any of them is applicable and supported? Also, more suggestions/ideas/options are appreciated.

Upvotes: 1

Views: 4912

Answers (1)

Nathan
Nathan

Reputation: 5204

Support for SVG is quite limited so unfortunately that's not an option: https://www.caniemail.com/features/image-svg/

@media prefers-color-scheme: dark is not supported on Gmail/some Outlooks, so that's not going to work. https://www.caniemail.com/features/css-at-media-prefers-color-scheme/

Using a gradient to force unchanging background is not ideal (we should be supporting customer's preferences), and also not 100% cross-compatible. (background-image: linear-gradient(#ffffff,#ffffff);)

If a 1px white stroke is no good for you, you could try a soft glow like Litmus do. Litmus logo dark mode and light

Alternatively, sometimes we just end up putting a single-colour background in the image itself (i.e. getting rid of the transparency), perhaps with rounded corners (a tiny bit of transparency on the corners). Works best for icons, but might be your only option.

Upvotes: 2

Related Questions