Dark mode for Github Markdown images

How to use different images in Markdown for light or dark mode

Tom • Learning, Coding Guides •

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.

Actions

Feedback

Suggested Posts