# Light and Dark Mode with Images **URL:** \ **Category:** Elements\ **Created:** [January 15, 2025, 12:27pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940 "2025-01-15T12:27:39Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [January 15, 2025, 12:27pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/1 "2025-01-15T12:27:39Z")
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. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [January 15, 2025, 12:45pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/2 "2025-01-15T12:45:35Z")
In an ideal world it would be possible to [change the colours used in SVG documents](https://forums.realmacsoftware.com/t/svg-component-edit-composition-colours/45927) in Elements (incl. at various breakpoints), but if SVG isn’t an option then another option would be [providing various `` images within a `` element to be used in different contexts](https://mariohernandez.io/blog/art-direction-using-the-picture-html-element/) ([mobile/desktop](https://web.dev/learn/design/picture-element), [light/dark mode](https://stackoverflow.com/questions/55787167/how-to-change-image-source-based-on-css-prefers-color-scheme), 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. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 15, 2025, 12:50pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/3 "2025-01-15T12:50:38Z")
> [@anon68150607](#): > > In an ideal world it would be possible to [change the colours used in SVG documents](https://forums.realmacsoftware.com/t/svg-component-edit-composition-colours/45927) in Elements (incl. at various breakpoints), but if SVG isn’t an option then another option would be [providing various `` images within a `` element to be used in different contexts](https://mariohernandez.io/blog/art-direction-using-the-picture-html-element/) (mobile/desktop, [light/dark mode](https://stackoverflow.com/questions/55787167/how-to-change-image-source-based-on-css-prefers-color-scheme), etc). 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… ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [January 15, 2025, 12:56pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/4 "2025-01-15T12:56:01Z")
Not yet @Dan as I’ve been waiting for the [Elements Language Docs](https://docs.realmacsoftware.com/elements-docs/elements-language/api-introduction) 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. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [January 15, 2025, 1:04pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/5 "2025-01-15T13:04:05Z")
> [@WeaverPixel](#): > > 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. 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! ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [January 15, 2025, 1:52pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/6 "2025-01-15T13:52:01Z")
> [@bon](#): > > 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. 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. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 16, 2025, 6:35pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/7 "2025-01-16T18:35:54Z")
@WeaverPixel [try the latest beta](https://forums.realmacsoftware.com/t/elements-beta-30-build-23176/45955), you can now set dark and light images in the Image component! ---
**Author:** ![jenkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jenkman/32/5003_2.png) [@jenkman](https://forums.realmacsoftware.com/u/jenkman)\ **Post date:** [January 16, 2025, 8:26pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/8 "2025-01-16T20:26:42Z")
How is this done? I do not see any controls for this. Thanks, ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 16, 2025, 8:39pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/9 "2025-01-16T20:39:21Z")
We’re looking into this now… it might be that most of the component changes didn’t get compiled into beta 30 — Doh! ---
**Author:** ![jenkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jenkman/32/5003_2.png) [@jenkman](https://forums.realmacsoftware.com/u/jenkman)\ **Post date:** [January 16, 2025, 8:41pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/10 "2025-01-16T20:41:16Z")
I am also getting some beachball spins now after changing a compents setting. I have a Mac Studio with the M1 Max 32gb memory ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [January 16, 2025, 9:03pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/11 "2025-01-16T21:03:09Z")
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 😂 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 16, 2025, 9:07pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/12 "2025-01-16T21:07:30Z")
haha, sorry about that! When it ships in the next beta (b31, tomorrow), it will look like this… very easy to use 😊 ![CleanShot 2025-01-16 at 9 .06.16@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/f/efaaccc13b613788c7ac75ba7b232519c3582af8.jpeg) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 17, 2025, 5:47pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/13 "2025-01-17T17:47:57Z")
Beta 31 just dropped, this new build definitely has all the Component updates, including light/dark mode for images! > [@Elements Beta 31 (Build 23180)](https://forums.realmacsoftware.com/t/elements-beta-31-build-23180/45973): > > Hello again, Hot on the heals of beta 30, predictably we have beta 31. This build contains some Workspace fixes (although we still have more to do). It also contains ALL of the Component fixes that should have been in beta 30, plus a bunch more! What’s New in Elements Beta 31 (Build 23180)? Switching Workspaces no longer breaks Editor resizing Components no longer get duplicated when dragging from Editor into the Node Browser Component Updates Video: Improved MP4 support Video: Added custom… ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [January 18, 2025, 6:42pm UTC](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940/14 "2025-01-18T18:42:23Z")
Thanks guys! It`s working great!