Make images responsive to light/dark mode on GitHub

May 17, 2023


Hello there, today I’d like to share with you something that I’ve been using lately on my READMEs to have my images responsive the light or dark modes. It’s a very simple feature on GitHub but not many people know about it.


Here is the result on my new open source project pr-tracker



How to use it

To use this feature, you are going to need to have two images or URL pointing at your light and dark image versions. In my example I had the following:

├── demo-dark.png
├── demo-light.png
Enter fullscreen mode

Exit fullscreen mode

with Markdown

If you prefer to add your images with Markdown all you need to do is to append #gh-dark-mode-only or #gh-light-mode-only at the end of the URL. Like this:

Enter fullscreen mode

Exit fullscreen mode

with HTML

Or you can use the <picture /> tag with the new media feature, specifying the value (prefers-color-scheme: dark) or (prefers-color-scheme: light) like this:

    media="(prefers-color-scheme: dark)"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  <img src=".github/demo-light.png" />
Enter fullscreen mode

Exit fullscreen mode


I didn’t figured this on my own, the first time I learned about this feature was through the github-readme-stats project, under the responsive-card-theme section, it showed examples that I’ve used in my profile README and I’ve been also using on repositories as well.

The cover image used belongs to the first link below.

Useful links:


  • Have you ever seen this feature before?
  • Have you ever used this before?
  • Do you have plans to apply this feature somewhere?

Thanks for reading. Have a nice day!

Source link

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *