Different image for dark mode

Forum|Forum|2 years ago
October 30, 2023
1 reply
4385 views

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

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Jasbirka

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

JasbirkaAccepted solution

Level 5

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

Jasbirka

Level 5

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

A

ayaspanAuthor

Level 3

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!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded