I’m just working on something which uses the Light & Dark modes extensively. Works really very well and is super easy to settup.
But now I came to one point which I cannot solve. That’s about images. Images typically do not change in Light or Dark mode, fine, but when we are talking about Logos, they need to change.
So I tried it with putting 2 logos on my side - one for dark and one for light. I then want make then the one visible in dar and the other visible in light. But that is not working, they do not react on the visibility setting under layouts.
Is this something you want to change? Or is there another way I am not aware?
I cannot work with SVGs as the logos have multiple colours.
Currently neither are supported in Elements, but both would be helpful in solving your current design problem without having two (or more) different elements that you show and hide.
I remember you saying before that you code… have you thought about building a custom component to try and do this? You have access to all the same API’s we do…
Not yet @Dan as I’ve been waiting for the Elements Language Docs to develop further (many of the pages are still essentially blank), and I’m not sure I’ll be using Elements long-term yet (ahem, “the inspector”).
I was also hoping that some of these modern workflows and standards would be built into the core of Elements.
The only control that works independently between light and dark mode is the themeColor control. That’s why changing the Visibility setting will change it across both modes.
We are looking at how we can add controls to show and hide components across light and dark mode, but there’s nothing built in to Element just yet. We hope to have something in the next couple of weeks.
For now, you can use the CSS Classes box in the Advanced control group to add custom classes that will show/hide content between light/dark mode.
Adding hidden dark:block should hide the component in light mode, and show in dark mode. The reverse of that would simply be dark:hidden