Dunkler Modus für Github Markdown-Bilder

So verwenden Sie verschiedene Bilder in Markdown für den hellen oder dunklen Modus

Dunkler Modus für Bilder

Wenn Sie Ihre Medien-Assets in Github Markdown nach Farbschema unterscheiden möchten, ist dies jetzt durch ein Update der Syntax möglich.

Bisher konnten Sie das img-Tag verwenden, um den Markdown-Interpreter anzuweisen, Bilder entweder aus Ihrem Repository oder einem entfernten Ziel zu rendern. Um sich bei Ihren Bildern an den Dunkelmodus anzupassen, können Sie jetzt auch das modernere HTML-Bild-Tag verwenden.

So passen Sie Github Markdown an den Dark Mode an

Das folgende Codebeispiel zeigt, wie Sie zwei Varianten für ein Bild einbinden können, basierend auf dem bevorzugten Farbschema des Benutzers, d. h. dunklem oder hellem Modus. Die Syntax entspricht HTML5 und 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>

Wie Sie sehen können, können sich Ihre Bilder mit ein paar Änderungen jetzt auch an den Dunkelmodus anpassen. Da die gängigen Markdown-Elemente den Dunkelmodus bereits vollständig unterstützen, ohne dass Sie etwas tun müssen, ist dies eine willkommene Ergänzung zu den Fähigkeiten von Github Markdown.