DEV Community

Cover image for Make images responsive to light/dark mode on GitHub
Mateus Abelli
Mateus Abelli

Posted on

1 1 1

Make images responsive to light/dark mode on GitHub

Introduction

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.

Demonstration

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

light-preview

dark-preview

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:

.github/
├── 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:

![Demo-Light](.github/demo-dark.png#gh-dark-mode-only)
![Demo-Dark](.github/demo-light.png#gh-light-mode-only)
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:

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

Sources

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:

Questions

  • 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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay