Skip to content

Instantly share code, notes, and snippets.

@thinkjrs

thinkjrs/dark-mode-image.html

Created December 12, 2023 16:17
Show Gist options
  • Save thinkjrs/2f2d8b1de1760334a3ebf23098262dc8 to your computer and use it in GitHub Desktop.
Save thinkjrs/2f2d8b1de1760334a3ebf23098262dc8 to your computer and use it in GitHub Desktop.
Download ZIP
How to add dark and light mode adjustments for an image in HTML
Raw
dark-mode-image.html
<!-- https://larsmagnus.co/blog/how-to-make-images-react-to-light-and-dark-mode -->
<picture>
<source
srcset="dark-image.png"
media="(prefers-color-scheme: dark)"
/>
<img
src="light-image.png"
alt="Browser with large and small images of a coffee cup and plants"
/>
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment