Different image for dark mode

[ayaspan]

Hi all,

I realize this theme has been addressed before but not specifically this issue. I'm trying to create a Marketo template with modules that come with a preset image. There is a regular version of the image, and then there's an altered version that would ideally replace it if the user is in dark mode. What can I put in the HTML/CSS of this module/template to make that happen? Keep in mind I have limited expertise, I have had to do a few projects in coding throughout my career but it's a lot of trial-and-error and searching as I go, so I'm not super caught up on the lingo. Appreciate any help, thank you!

Cheers,

Alan

[Jasbir_Kaur · Accepted solution]

Hi @ayaspan,

You have to use some CSS in the head section, for example - 

<style type="text/css">
         :root {
         color-scheme: light dark;
         supported-color-schemes: light dark;
         }
      </style>
	  
      <style type="text/css">
         @media (prefers-color-scheme: dark) {
         /* Shows Dark Mode-Only Content, Like Images */
         .dark-img {
         display: block !important;
         width: auto !important;
         overflow: visible !important;
         float: none !important;
         max-height: inherit !important;
         max-width: inherit !important;
         line-height: auto !important;
         margin-top: 0px !important;
         visibility: inherit !important;
         }
         /* Hides Light Mode-Only Content, Like Images */
         .light-img {
         display: none;
         display: none !important;
         }
      </style>

And, for image replacement in dark mode, use the below code - 

<td class="light-img">
<div class="mktoImg" id="Header-Logo" mktoname="Header Logo">
	<a target="_blank" href="" style="text-decoration:none;outline:0;">
	  <img src="" />
	</a>
</div>
</td>
<td class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
<div class="mktoImg" id="Header-Logo-dark" mktoname="Header Logo Dark Mode">
	<a target="_blank" href="" style="text-decoration:none;outline:0;">
	  <img src="" width="118" />
	</a>
</div>
</td>

Thanks!

Jasbir

[Jasbir_Kaur]

Hi @ayaspan,

If the above solution is working for you, please mark it as a solved solution so that other members can use it in the future.

Else, if you have any concerns, please don't hesitate to let me know.

Thanks!

Jasbir 

[ayaspan]

Thank you so much for your answer. I am trying it now. Sorry for my delayed response; been staying up until the wee hours dealing with this template (like 2 days straight just trying to get it to look right in Outlook), just now finding the opportunity to try this out. Excited!

[ayaspan]

Just asking, sorry if this seems obvious or if I'm being nit-picky, but is the width="118" part in the dark image code necessary? If I'd like the image to display at full width, do I need to specify width? And I'm guessing "margin-top: 0" in the CSS is to make sure there's no space left by the hidden light mode image?

[Jasbir_Kaur]

You can define any width there according to your needs.