Forum Discussion

dmatdialog's avatar
dmatdialog
Copper Contributor
Sep 01, 2023

Windows Outlook prefers-color-scheme

I've been using the snippet below to show/hide images if a client prefers dark-mode over default light-mode. Its been working great ever since I've put in place but recently it does not work for OL Office on any Windows (365 Windows 10, Mail Windows 11, Mail Windows 11).
It works as intended on OL Office Mac or OL Office Web app.

Is prefers-color-scheme still supported ?

Using 

 

Windows 10 Pro

Version 22H2

OS build 19045.3324

Windows Feature Experience Pack 1000.19041.1000.0

 

<!--Dark Mode image swap code. Works in Apple/iOS. Works on Outlook.com, but only if the images are linked-->
  <!--Styles-->
  <style>
    .dark-img { display: none !important; }

    @media (prefers-color-scheme:dark) {
      .dark-img {
        display: block !important;
      }

      .light-img {
        display: none !important;
      }
    }

    [data-ogsc] .dark-img {
      display: block !important;
    }

    [data-ogsc] .light-img {
      display: none !important;
    }
  </style>

  <!--HTML-->
  <a href=""><img class="light-img" src="https://via.placeholder.com/300x300" width="300" height="300" alt="" style="width: 100%; max-width: 300px; height: auto;" border="0" />
  <!--[if !mso]><! -->
  <img class="dark-img" src="https://via.placeholder.com/200x200" width="200" height="200" alt="" style="width: 100%; max-width: 200px; height: auto;" border="0" />
  <!--<![endif]--></a>

 

  • NikolinoDE's avatar
    NikolinoDE
    Gold Contributor
    Sep 03, 2023

    dmatdialog 

    The prefers-color-scheme media query is primarily intended for use in web browsers and web-based email clients that support it. It allows websites to adapt their appearance based on the user's preferred color scheme (dark or light mode) in the operating system or browser.

    However, support for prefers-color-scheme in desktop email clients, including Windows Outlook, is limited or non-existent. Most desktop email clients do not provide this level of CSS media query support, which means that your email's dark mode image swap code is unlikely to work as expected in these clients.

    In your case, it appears that your code works in Apple/iOS clients and Outlook.com because they might support some web-related CSS features. However, for Windows Outlook and other desktop email clients, this feature is not reliable.

    To ensure a consistent user experience across all email clients, including desktop ones, it's best to rely on more basic CSS and HTML techniques for image display and layout. This might involve sending both light and dark versions of images in your email and using regular CSS properties like display and visibility to control their visibility, rather than relying on advanced media queries.

    Email client support for advanced CSS features can be inconsistent, so it's often recommended to design HTML emails with simplicity and compatibility in mind.

    My knowledge of this topic is limited, but since no one has answered it for at least one day or more, I entered your question in various AI. The text and the steps are the result of various AI's put together.

     

    My answers are voluntary and without guarantee!

     

    Hope this will help you.

    Was the answer useful? Mark them as helpful!

    This will help all forum participants.

Resources