I see in v5 there can be different site logos used for light and dark modes. Using code like --set__logo-light, ipsLogo__image--light, and data-ips-prefers-color-scheme="light".

Question: Is it possible to use any of the existing classes or selectors in our own custom HTML for advertisements that would enable a banner to be shown based on light or dark theme? For example, if theme=dark, show banner A, else show banner B. Or, is there another way to do this?

Edited May 17May 17 by Chris027

Or, can we get a toggle like this to supply different code for different modes?

Using the class ipsLogo__image--light technically works, but not really. If the advertisement is selected to show, but the person is using dark mode, then no image shows.

Perhaps there is better html code I can write, with an if ipsLogo__image--light then image Z, if ipsLogo__image--dark then image B.

OK, I think I figured out a way to do it, but unsure if it's the best.

<a href="LINK_HERE">

<!-- Light mode image (hidden in dark mode) -->

<img class="ipsLogo__image--light" src="PATH_TO_YOUR_DARK_IMAGE" alt="light-image">

<!-- Dark mode image (hidden in light mode) -->

<img class="ipsLogo__image--dark" src="PATH_TO_YOUR_DARK_IMAGE" alt="dark-image">

</a>

Those classes should only be used for the logo. Use this instead:

<a href="LINK_HERE">
	<!-- Light mode image (hidden in dark mode) -->
	<img class="i-display_light" src="PATH_TO_YOUR_LIGHT_IMAGE" alt="light-image" loading="lazy">
	<!-- Dark mode image (hidden in light mode) -->
	<img class="i-display_dark" src="PATH_TO_YOUR_DARK_IMAGE" alt="dark-image" loading="lazy">
</a>

19 minutes ago, Ehren said:

Those classes should only be used for the logo. Use this instead:

<a href="LINK_HERE">
	<!-- Light mode image (hidden in dark mode) -->
	<img class="i-display_light" src="PATH_TO_YOUR_LIGHT_IMAGE" alt="light-image" loading="lazy">
	<!-- Dark mode image (hidden in light mode) -->
	<img class="i-display_dark" src="PATH_TO_YOUR_DARK_IMAGE" alt="dark-image" loading="lazy">
</a>

Thanks @Ehren !