Modo oscuro para imágenes de Github Markdown

Cómo usar diferentes imágenes en Markdown para modo claro u oscuro

Modo oscuro para imágenes

Si desea distinguir sus activos de medios en Github Markdown por combinación de colores, una actualización de la sintaxis lo hace posible ahora.

Hasta ahora, podía usar la etiqueta img para indicarle al intérprete de Markdown que renderice imágenes desde su repositorio o desde un destino remoto. Para adaptarse al modo oscuro con sus imágenes, ahora también puede usar la etiqueta de imagen HTML más moderna.

Cómo adaptar Github Markdown al modo oscuro

El siguiente ejemplo de código muestra cómo incluir dos variantes para una imagen, según el esquema de color preferido del usuario, es decir, modo oscuro o claro. La sintaxis es equivalente a HTML5 y 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>

Como puede ver, con algunos cambios, sus imágenes ahora también pueden adaptarse al modo oscuro. Como los elementos comunes de Markdown ya son totalmente compatibles con el modo oscuro sin que tengas que hacer nada, esta es una adición bienvenida a las capacidades de Github Markdown.