E-Mail background does not adapt to dark mode when using signature

Question

I created an e-mail signature to be able to include svg-graphics via graphic URLs and to implement a functionality that automatically switches between a light and a dark version of a company logo. Therefore I wrote the entire signature with html and css and included this code in the html-file of a newly created signature. When I now display the signature before sending, it looks and works just as I wanted it to look and work (formatting, hyperlinks, etc.). However, after receiving an e-mail written with this signature I noticed that the entire background of that e-mail is always white no matter if I am in light mode or dark mode and nothing I tried to fix it has worked. I know that html in Outlook signatures is prone to be problematic due to Outlook's use of the Word engine that interprets the language differently. Yet, I do not understand, why everything works just fine except for the background. I just added some class definitions to the head of the signature html-file and the code for the signature to the body. After trying to explicitely set the background to be transparent I received the same results.

Answer 1

Dear Mats Weigel

Thanks a lot for your feedback and patience! Very sorry for late reply!

Based on your further description, I really want to help you, and I'm consulting your thread with my team members, and I'd like to share some more specific redirect information with you, but our forum lacks relevant permissions and tools, in fact Microsoft has a separate team resource where our most valuable professional engineers and members can provide possible information for your issue, then please trust that for the issue you mentioned, they can give you more professional support. So to help you better and not waste more of your time, I highly recommend you to create a service ticket in the Microsoft 365 admin center****to support > service requests through navigation, as they have more access permissions than on this forum, and professional engineers will further help you.

Note: if you are not using admin account, please kindly ask admin within your organization for help. If you are not sure who is admin, please kindly refer to How do I find my Microsoft 365 admin? - Microsoft Support

Sincerely hope that your problem will be solved as soon as possible! Wish you have a wonderful day!

Sincerely

Kerry Chen | Community Moderator

Answer 2

I tried Inline CSS and also conditional comments, but the problem is, that the background color is always automatically set to white, even if I declare it specifically as another color. For example with the hmtl command the background of the entire signature is still displayed as white before AND after sending the e-mail in Outlook even though I get a fully yellow background when I open the file in the browser. So the first problem I now need to solve is to be able to actually set the colour in Outlook before I can troubleshoot further

In the following I will provide the code for the body of the html-file (no changes made to the head) so you can test it yourself. (The first paragraph is highlighted in blue, to show, that Outlook still enables background colours for individual paragraphs.):

nametitle

Autohaus Meyer GmbHFriedrich-Vorwerk-Str. 12-1421255 Tostedt

TelFax

Mail MyMailwww.meyer-tostedt.de

https://meyer-tostedt.de/https://meyer-tostedt.de/https://meyer-tostedt.de/https://meyer-tostedt.de/https://meyer-tostedt.de/

https://www.instagram.com/autohaus_meyer_gmbh/

https://www.facebook.com/meyertostedt/

https://de.linkedin.com/company/autohaus-meyer-gmbh

Please note: The formatting might be off now after copying the code to this post. That is fine, I am first and foremost only interested in a fix for the background color

Answer 3

Dear Mats Weigel

Have a nice day! Thank you for posting to the Microsoft community. We will be happy to help you!

First of all, we regret for the inconvenience caused to your work. Based on your description, I have a general understanding of your question, seemly you've put a lot of effort into creating a dynamic email signature with HTML and CSS. The issue you're encountering with the background color not switching between light and dark modes is likely due to how Outlook handles HTML and CSS in email signatures. Outlook uses the Word engine to render HTML, which can lead to inconsistencies, especially with more advanced CSS features. Please kindly check whether following can help you

1. Inline CSS: Outlook tends to handle inline CSS better than embedded or external styles. Try moving your CSS styles directly into the HTML elements as inline styles.
2. Conditional Comments: Use conditional comments to target specific versions of Outlook. This can help you apply different styles for different versions of Outlook.
3. Background Color: Instead of setting the background to be transparent, try explicitly setting the background color for both light and dark modes. You can use media queries to detect the user's color scheme and apply the appropriate background color.
4. Fallback Colors: Provide fallback colors for your background. This ensures that if the preferred color isn't supported, a secondary color will be used.

In addition, if you still need further help, then to help you better, I still need collect more information to narrow down the scope of question:

• What's your type of account(business account within business subscription/outlook.com/hotmail.com/live.com/msn.com/imap account/pop account)
• What's your outlook version details? Please kindly check following and share a complete screenshot with me, thanks. For your reference What version of Outlook do I have? - Microsoft Support
• It seems that your problem is happening on the outlook desktop client, if yes please kindly use your account to login OWA (Outlook Web App) **** and check whether you got the same issue in web, for your reference Create and add an email signature in Outlook on the web - Microsoft Support
• Ensure that your Outlook application is up to date on all devices. Sometimes, updates can fix bugs and improve functionality. For your reference Check for updates in Outlook - Microsoft Support

Please kindly believe that I will do my best to do more research and testing to help you further when I get the feedback from you I need.

Please note that our initial response does not always resolve the issue immediately. However, with your help and more detailed information, we can work together to find a solution.

Thank you in advance for your understanding. Your patience and cooperation will be greatly appreciated. Hope for all the best!

Sincerely

Kerry Chen | Community Moderator