Is there a built in function to serve an image for light mode and another image for dark mode? Or any hint in how to approach this? I’m using casper theme.
Interesting question @escudero. “Dark mode” in Casper is done using CSS and uses the prefers-color-scheme: dark media query. So you could use some custom CSS to optionally show and hide graphics on the page and wrap the “dark mode” CSS in that media query.
Is this for a single post or for the home page? You could apply the image directly into the theme, or if this is for all posts then maybe utilising a meta field for the dark image is an option.
I’d be interested to know about your use case 
1 Like
@DavidDarnes what comes to my mind right now is replacing <img> with <picture> in the index.hbs for example, where I want to switch the banner.
What’s stopping me right now is that I don’t really know how to upload a second “banner image”, can you point me in the right direction?
There’s a couple of ways to achieve this:
- Utilise the alternative meta images in post settings. Ghost allows you to upload feature images for both Twitter and Facebook, you could use these fields to upload an alternative image and access it using
{{post.twitter_image}}or{{post.og_image}}respectively - Add an image to the start of the post content, hide it with CSS but use JavaScript to transpose it into the element you’d like it to appear in
Would I be assuming correctly that you’re looking to have the feature image change when someone is using a dark colour scheme?