How to define dark/light mode images in GitHub Markdown

I was browsing the GitHub markdown docs to check something and spotted a new GitHub feature. 🙈 GitHub markdown finally supports light and dark mode images! It always bugs me when GitHub Readmes look super polished but include a terrible-looking "hero image" in the dark GitHub UI (or the other way around).

Use a URI fragment in the image URL to hide or show it depending on user preferences!

![Fancy logo](./dark.png#gh-dark-mode-only)
![Fancy logo](./light.png#gh-light-mode-only)

Here is it in action. 👇

I couldn't find official release notes about it, but the feature seems to be only a few days old. The new CEO shared it on Twitter, too.

While this approach seems smart, it comes with drawbacks. Appending #gh-dark-mode-only to an image URL works perfectly fine on github.com. That's not the only location many Readmes are rendered on, though. npm renders repo Readmes. Blogs render repo Readmes. GitHub Markdown can go anywhere!

Any site but GitHub will render two images with this new approach.

Thinking of npm, I'm sure they will adopt this syntax quickly (it's all Microsoft, right?), but it's probably too early to adopt this feature right now. And if you do, you better be sure that the Readme isn't rendered anywhere else because I don't see Markdown renderers implementing this soon...

GitHub limits the number of allowed HTML in their Markdown to not open a massive can of worms. Imagine folks putting script tags in their Readmes – "oh hi, wonderful XSS attack". 👋

But it's now great to see that GitHub is considering allowing the picture element for dark mode images GitHub supports the picture element. Yay!

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./dark.png">
  <img alt="Text changing depending on mode. Light: 'So light!' Dark: 'So dark!'" src="./light.png">
</picture>

I tested the addition in the example repo, and it works even with relative paths!

Read more about the feature in the GitHub markdown docs.