# Light and Dark Mode with Images

**URL:** <https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940>\
**Category:** RapidWeaver 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:** 1\
**Showing post:** 2

<div class="post-metadata">

**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")

</div>

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 `<source>` images within a `<picture>` 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.

---

_[View the full topic](https://forums.realmacsoftware.com/t/light-and-dark-mode-with-images/45940)._