Mode sombre pour les images Github Markdown

Comment utiliser différentes images dans Markdown pour le mode clair ou sombre

Mode sombre pour les images

Si vous souhaitez distinguer vos ressources multimédias dans Github Markdown par schéma de couleurs, une mise à jour de la syntaxe rend cela possible maintenant.

Jusqu'à présent, vous pouviez utiliser la balise img pour demander à l'interpréteur Markdown de restituer des images à partir de votre référentiel ou d'une destination distante. Pour vous adapter au mode sombre avec vos images, vous pouvez désormais également utiliser la balise d'image HTML plus moderne.

Comment adapter Github Markdown au mode sombre

L'exemple de code suivant montre comment inclure deux variantes pour une image, en fonction du schéma de couleurs préféré de l'utilisateur, c'est-à-dire le mode sombre ou clair. La syntaxe est équivalente à HTML5 et 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>

Comme vous pouvez le constater, avec quelques modifications, vos images peuvent désormais également s'adapter au mode sombre. Comme les éléments communs de Markdown prennent déjà entièrement en charge le mode sombre sans que vous ayez besoin de faire quoi que ce soit, il s'agit d'un ajout bienvenu aux capacités de Github Markdown.