Dark Mode images are now showing up with the Light Mode images on Outlook in Chrome and Edge. Help!

[Danielle_Wong]

How do we fix our templates so that the dark mode images are hidden in Outlook for Chrome or Edge? It looks correct in Outlook program on windows and mobile devices. 

The issue is only on Outlook for Chrome and Edge. So to clarify, both the light mode and dark mode images are showing.

[Jo_Pitts1]

@Danielle_Wong, 

Without seeing your code, it's pretty impossible to answer that question.  If you share, we can take a look

Cheers

Jo

[Jasbir_Kaur]

Hi @Danielle_Wong,

Dark mode can often pose challenges for email designs, especially with images. Here are a few solutions that might help improve how your images display in dark mode on Outlook, Chrome, or Edge:

1. Use Transparent PNGs

Transparent PNG images can adapt better to dark mode backgrounds, ensuring that your images don’t have harsh white boxes around them.

2. CSS for Dark Mode

Implement CSS media queries to detect dark mode and serve different images or styles. Unfortunately, this isn't fully supported by all email clients, including Outlook. However, for those that do support it, it can be a powerful tool.

@media (prefers-color-scheme: dark) {
  img {
    filter: invert(1);
  }
}

Specific Outlook Fixes

Outlook has its quirks, so here are additional tips:

• Use VML (Vector Markup Language) for background images.
• Include fallback colors using Microsoft’s proprietary mso tags.

Rest, you can share your code, so that we can guide you accordingly, along with the code please share the screenshots of the issues as well.

Thanks!

Jasbir