Light and Dark Mode with Images

Hi @Dan,

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.

In an ideal world it would be possible to change the colours used in SVG documents in Elements (incl. at various breakpoints), but if SVG isn’t an option then another option would be providing various <source> images within a <picture> element to be used in different contexts (mobile/desktop, light/dark mode, etc).

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.

2 Likes

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

Hope that helps!

Thanks @bon, that would be perfect for me. As long as it is in the final 1.0 I can handle this currently, no worries.

Easiest (for my tasks) would be if we can add optionally two pictures in the image component, one for light and one for dark.

@WeaverPixel try the latest beta, you can now set dark and light images in the Image component!

How is this done? I do not see any controls for this. Thanks,

We’re looking into this now… it might be that most of the component changes didn’t get compiled into beta 30 — Doh!

1 Like

I am also getting some beachball spins now after changing a compents setting. I have a Mac Studio with the M1 Max 32gb memory

I was just trying out how this is implemented and thought I am too stupid to understand it. But thanks god the error is on your side :joy:

haha, sorry about that!

When it ships in the next beta (b31, tomorrow), it will look like this… very easy to use :blush:

3 Likes

Beta 31 just dropped, this new build definitely has all the Component updates, including light/dark mode for images!

Thanks guys! It`s working great!

2 Likes