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

Danielle_Wong · ‎06-27-2024

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 · ‎06-30-2024

@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 · ‎07-02-2024

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

Dave_Roberts · ‎07-02-2024

I've noticed some similar behavior lately with Outlook.com for Chrome and Edge (and even in AOL and Yahoo) not loading styles in the <head> of the document which are nested inside a <style> tag. I'm not sure if this is a recent update but I've been working on a few issues with this over the last week. So far, from what I can tell this has something to do with the styles in the <head> of the document not reading in those inboxes, so any classes you'd be using to show/hide the light/dark mode images (or media queries) might not firing.
In my case, I was able to move the classes from the <style> element in the <head> to inline styles (for a button) and that seemed to have resolved the issue in Outlook.com on Chrome and Edge browsers. I'm just not sure there's an easy fix for this with something like light/dark mode images b/c that would rely upon a show/hide feature and that probably will require some kind of class or media query to work properly.

In my experience, it's best to inline styles for email -- even when testing shows that you can do some fancy new thing -- for the sake of future-proofing your emails b/c of situations like this where some of the email clients push an update that messes something up. It sucks, b/c it means all those fancy bells-and-whistles in email are just problems waiting to happen but there's also something to be said for keeping it simple for the sake of not breaking stuff.

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