Different background image for dark and light theme
Unanswered
Atlantic menhaden posted this in #help-forum
Atlantic menhadenOP
Hello, i want to have background image instead of color. How to render one image if user has light theme and another image if user has dark theme? Is it possible that on initial render only one image is loaded, to speed up the load time? As i see here it always loads both images.
2 Replies
You can use the
As it is a media selector, you can have more flexibility but some browsers might not support this API.
<picture> tag in HTML:<picture>
<source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
<img src="light-image.png">
</picture>As it is a media selector, you can have more flexibility but some browsers might not support this API.
And I don't sure if it works great with Next.js Image, technically it should.