Support #gh-dark-mode-only and #gh-light-mode-only

[b0o]

See the GitHub docs and this article for an explanation of #gh-dark-mode-only and #gh-light-mode-only.

You can use this repo of mine, which uses this feature, to test this functionality if you'd like.

Here is what my repo looks like in gh-markdown-preview:

Click to expand

And here is what it looks like rendered on GitHub:

Click to expand

[yusukebe]

HI @b0o !

#gh-dark-mode-only and gh-light-mode-only seems to be deprecated.

The old method of specifying images based on the theme, by using a fragment appended to the URL (#gh-dark-mode-only or #gh-light-mode-only), is deprecated and will be removed in favor of the new method described above.

Link

So we can use the media queries:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>