Dark Mode for images
If you want to distinguish your media assets in Github Markdown by color scheme, an update to the syntax makes this possible now.
Until now, you could use the img-tag to instruct the markdown interpreter to render images either from your repository or a remote destination. To adapt to dark mode with your images, you can now also use the more modern HTML picture-tag.
How to adapt Github Markdown to dark mode
The following code example shows how to include two variants for an image, based on the user’s preferred color scheme, i.e. dark or light mode. The syntax is equivalent to HTML5 and CSS.
<!--
Note we're using the same HTML-sytnax for
constraint-based assets as you would do on
the web.
-->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://path-to-your-dark-mode-image.webp">
<img alt="A single image caption for both variants" src="https://path-to-default-light-mode-image.webp">
</picture>
As you can see, with a few changes, your images can now adapt to dark mode as well. As the common Markdown elements are already fully supporting dark mode without you needing to do anything, this is a welcome addition to the capabilities of Github Markdown.
