Modalità scura per le immagini Github Markdown

Come utilizzare immagini diverse in Markdown per la modalità chiara o scura

Dark Mode per le immagini

Se vuoi distinguere le tue risorse multimediali in Github Markdown in base alla combinazione di colori, un aggiornamento della sintassi lo rende ora possibile.

Fino ad ora, è possibile utilizzare il tag img per istruire l'interprete markdown per eseguire il rendering delle immagini dal proprio repository o da una destinazione remota. Per adattarti alla modalità oscura con le tue immagini, ora puoi anche utilizzare il più moderno tag immagine HTML.

Come adattare Github Markdown alla modalità oscura

L'esempio di codice seguente mostra come includere due varianti per un'immagine, in base alla combinazione di colori preferita dall'utente, ovvero la modalità scura o chiara. La sintassi è equivalente a HTML5 e 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>

Come puoi vedere, con alcune modifiche, le tue immagini possono ora adattarsi anche alla modalità oscura. Poiché gli elementi comuni di Markdown supportano già completamente la modalità oscura senza che tu debba fare nulla, questa è una gradita aggiunta alle funzionalità di Github Markdown.