-3

I am designing HTML email template which look fine on majority devices, iOS's and browsers except Outlook Office 365 on Windows 10 Dark Mode.

The problem is that my background image doesn't appear, instead background colour becomes dark. I have a logo on my background and since it's dar too - I can't see it.

This is how it looks on Outlook Office 365 on Windows 10 Dark Mode: This is how it looks on Outlook Office 365 on Windows 10 Dark Mode

I would like to display my background image, but if it's impossible - either to change the background colour to light (which is against the Dark Mode rules, I guess), or display white version of the logo (the different image). But the changes should only be made on Outlook Office 365 on Windows 10 Dark Mode

How can I solve this issue?

Syfer
  • 4,262
  • 3
  • 20
  • 37
dodolap
  • 1
  • 1

2 Answers2

0

Try something other than .svg. For example.png.

  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Dennis van de Hoef - Xiotin Dec 29 '21 at 20:38
  • Thank you for the response an I'm sorry, English is not my native language, so probably I wrote it unclear. I use the .png file for the image, but I've also tried .svg as an option. I also edited my original post and added the print screen example. Hope it would be more clear that is the issue i try dealing with. Thank you! – dodolap Dec 30 '21 at 07:47
0

Outlook Windows doesn't have the controls we need to do that. The best you can do is to edit the image by adding a white stroke to it, or white shadow. This will not show on light mode (assuming your normal background is white--if not, use your normal background colour).

e.g. this white shadow will not show on light mode:

Litmus logo with white shadow around black text

See https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/#design for more information about all this.

Nathan
  • 4,358
  • 2
  • 10
  • 26