How to define dark/light mode images in GitHub Markdown
- Published at
- Updated at
- Reading time
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. 👇
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 GitHub supports the
picture element for dark mode images
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!