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
@DavidDarnes what comes to my mind right now is replacing
<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
Would I be assuming correctly that you’re looking to have the feature image change when someone is using a dark colour scheme?