Is it possible to use two different images for dark mode and clear mode?
It is defined with CSS…
Let’s say that you talk about a container’s (#mainContainer) backround image
(but you can define whichever element or rule with the following way)
[data-bs-theme="dark"] #mainContainer {
background-image=url("imageDark.webp");
}
[data-bs-theme="light"] #mainContainer {
background-image=url("imageLight.webp");
}
Please try it and see if you are ok
3 Likes
Thank you famousmag
But this setting is for a background image
But if I want to use two different PNG logos?
If you don’t understand my friend show us the code and the name/path of the images to make it clear for you
(the element that contains the Logos and the images(png) path/names 
- OR better… show us the code for the logo as it is now (without changing based on the theme
<img src="assets/images/Logo_dark_250.png" width="150">
Try this…
give an id to the img for example:
<img id="logoImg" src="assets/images/Logo_dark_250.png" width="150">
[data-bs-theme="dark"] #logoImg {
content: url("assets/images/Logo_dark_250.png");
}
[data-bs-theme="light"] #logoImg {
content: url("assets/images/Logo_light_250.png");
}
*I don’t know if you will face a browser caching problem… Maybe a css expert can advice us on this
1 Like
This in page
<img src="assets/images/Logo_dark_250.png" width="150" id="LogoImage">
And this in css
`[data-bs-theme=“dark”] #LogoImage {
content: url(“assets/images/Logo_dark_250.png”);
}
[data-bs-theme=“light”] #LogoImage {
content: url(“assets/images/Logo_250.png”);
}``
But not work
what do you see?
you get any error on console?
Are you sure that the path is correct?
Maybe you need a slash there…
It doesn’t give an error but it doesn’t change the image when the theme changes
But now I try another solution with Conditional Region
OK, as you wish.
I already show you that ir works for me my friend 
Using Wappler means should be your best bet.
I tried using Wappler directly by creating two different Conditional Regions
But evidently the condition is not correct
<div id="conditiondark" is="dmx-if" dmx-bind:condition="(bs5themeswitch2.theme == 'dark')"> ... </div>
<div id="conditiolight" is="dmx-if" dmx-bind:condition="(bs5themeswitch2.theme == 'light')"> …
1 Like
you’re absolutely right on this one
Your code seems correct and it should be working!
Here is mine using conditional regions…
<div id="conditionalDark" is="dmx-if" dmx-bind:condition="(bs5themeswitch1.theme=='dark')">
<img class="wappler-type-picture w-100 img-fluid" height="270" src="/assets/images/Chair_Apollo_1.webp" width="180">
</div>
<div id="conditionalLight" is="dmx-if" dmx-bind:condition="(bs5themeswitch1.theme=='light')">
<img class="wappler-type-picture w-100 img-fluid" height="270" src="/assets/images/Chair_Apollo_2.webp" width="180">
</div>
Works perfect!!
this 2 on bs5themeswitch2.theme is putting me in thoughts…
Maybe you have a second theme manager or theme switch forgotten in your page and it gets conflicted?
What happens if you just use.
<div id="conditiondark" dmx-show="bs5themeswitch2.theme=='dark'"> ... </div>
<div id="conditionlight" dmx-show="bs5themeswitch2.theme=='light'"> …The condition doesn’t work
I have to go out now, I’ll pick up later
Thanks for your help
Thank you for the CSS code to switch images between dark and light modes. This is working for me as expected 
1 Like
After many attempts I finally found the right combination.
In practice I did not have to condition the region with “Themeswitch Theme” but with “Thememanager Theme”
Now the change of dark / light mode conditions the correct vision of the image
But unfortunately there is still a problem
When “car” modeling is chosen, no image appears
Some idea?
What do you mean?
What is “car” modeling?
I meant AUTO modes
The PC had the corrector of the text in operation
Two solutions…
- Cancel the auto mode
button[data-bs-theme-value="auto"] {
display: none !important;
}
- Add one condditional region for
bs5theme1.theme == 'auto'