Post

Ever wanted to display different images in your GitHub READMEs depending on light or dark mode? 🌓 Check out the steps in this thread! 👇 #opensource #oss #floss #foss #github

9/10/24, 5:34 pm2 reposts2 likes

Open {re}Source

@openresource.dev

9 Oct 2024

You can append "#gh-light-mode-only" or "#gh-dark-mode-only" to your image URLs in Markdown. This will ensure only one image is displayed, depending on whether the viewer is in light or dark mode.

Open {re}Source

@openresource.dev

9 Oct 2024

But if you need this inside HTML elements, you'll have to create a link that includes the "#gh-light-mode-only" or "#gh-dark-mode-only" anchor tags.

Open {re}Source

@openresource.dev

9 Oct 2024

Why? Because GitHub’s CSS rules check the href for these anchor tags behind the scenes to decide which image or link to display.

Open {re}Source

@openresource.dev

9 Oct 2024

You can view the code directly in our repository, where it's used in our README: github.com/Open-reSourc... ⚠️ Please note that if your README is displayed on platforms like npmjs.com, this approach may not work, as it’s specific to GitHub’s rendering.

github.comgithub.com