In today’s blog post, we’ll explore a simple HTML technique to change an image URL specifically for dark mode. While CSS makes it easy to apply style changes based on the system’s preference for dark mode using the prefers-color-scheme
media feature, we often come across situations where we need to change the image itself, rather than applying a CSS rule.
One way to achieve this is by utilizing the picture
tag to wrap the img
tag. Here’s an example:
<picture>
<source
srcset="dark.png"
media="(prefers-color-scheme: dark)"
>
<img src="light.png">
</picture>
In the code snippet above, we define two image sources. The dark.png
image will be used if dark mode is supported and enabled. On the other hand, if the system is in light mode, the light.png
image will be used as a fallback.
This technique is well-supported across various browsers. Older browsers that do not implement the picture
tag or do not support dark mode will gracefully fall back to displaying the light.png
image.
One important thing to note is that the browser doesn’t download both images. Instead, it only downloads the image appropriate for the current mode. This ensures efficient bandwidth usage and eliminates any wastage.
If you’re interested in learning more about dark mode, feel free to check out my blog post on dark mode.
That’s it! Now you know how to change the HTML image URL specifically for dark mode. Happy coding!