I have over 5 themes for my forum, each with its own color scheme, as well as across day and night mode, I have two sidebar images (each in its own image widget) that I would like to have for each theme but I'd like to use unique images per theme, each with matching color schemes. How do I get unique images to show in the sidebar in page editor for each theme?

This is what it looks like now (shjowing three of the themes as an example):

Optimally each theme has it's own 'version' of these two images to match.

Edited May 12, 20251 yr by Kyle_H

You could use the data-ips-theme and data-ips-scheme attributes (on the html element) to hide certain widgets in certain themes.

A simple way would be to use a Raw HTML widget and use if statements like so:

<div class="i-display_light">
	{{if \IPS\Theme::i()->id === 1}}
		<img src="light-theme-1.jpg" alt="">
	{{elseif \IPS\Theme::i()->id === 2}}
		<img src="light-theme-2.jpg" alt="">
	{{else}}
		<img src="light-image-fallback.jpg" alt="">
	{{endif}}
</div>
<div class="i-display_dark">
	{{if \IPS\Theme::i()->id === 1}}
		<img src="dark-theme-1.jpg" alt="">
	{{elseif \IPS\Theme::i()->id === 2}}
		<img src="dark-theme-2.jpg" alt="">
	{{else}}
		<img src="dark-image-fallback.jpg" alt="">
	{{endif}}
</div>

The first div holds the "light" images, separated by theme. The second div holds the dark ones.

That should work.

Alternatively, if you're comfortable with HTML/CSS, recreating that design using code (and the CSS variables) would automatically make it match light/dark mode AND all of your color schemes.

Thank you, I will explore this!