Die Benutzerfreundlichkeit und Ästhetik von Codes und Dokumentationen gewinnt zunehmend an Bedeutung – insbesondere bei der Darstellung auf Plattformen wie GitHub. Da GitHub inzwischen sowohl einen Dark Mode als auch einen Light Mode unterstützt, wird es für Entwickler immer wichtiger, Inhalte so zu gestalten, dass Bilder in beiden Umgebungen harmonisch wirken. Eine einfache Bilddatei reicht oft nicht aus, da sie in dunklen Benutzeroberflächen zu grell oder bei hellen Hintergründen kaum sichtbar sein kann. Doch wie kann man innerhalb von Markdown-Dateien sicherstellen, dass Bilder sich dynamisch an den jeweils aktiven Farbmodus anpassen? Eine einfache und effektive Lösung liegt im Einsatz des HTML-Elements <picture>, das auch innerhalb von Markdown unterstützt wird. Dieses Element ermöglicht die Auswahl unterschiedlicher Bildquellen basierend auf verschiedenen Medienabfragen, wie dem bevorzugten Farbschema des Nutzers.
Damit kann ein Dark Mode Bild geladen werden, wenn der Anwender GitHub im dunklen Modus nutzt, und ein anderes Bild, wenn der helle Modus aktiv ist. So lässt sich unnötiger Kontrast vermieden und das visuelle Erlebnis deutlich verbessern. Mit der zunehmenden Nutzung von Dark Mode auf vielen Plattformen präferieren immer mehr Nutzer eine dunkle Umgebung für eine augenschonende Darstellung. Für Entwickler und Dokumentationsersteller bedeutet das, dass sie bei der Gestaltung ihrer Repositories einen Schritt weiterdenken und ihre visuellen Elemente entsprechend anpassen müssen. Standardbilder mit weißen Hintergründen beispielsweise können im Dark Mode unangenehm hervortreten und das Gesamtbild weniger professionell erscheinen lassen. Die Integration des <picture>-Elements in Markdown ist hier ein eleganter Weg, um sowohl Licht- als auch Dunkelmodus-Bilder bereitstellen zu können, ohne dass Nutzer manuell Einstellungen vornehmen müssen oder sich mit unpassenden Grafiken konfrontiert sehen.
Das Prinzip hinter dem <picture>-Element ist denkbar einfach, aber wirkungsvoll. Es erlaubt, verschiedene Bildquellen zu definieren, die jeweils via Media Queries an bestimmte Umgebungsbedingungen gebunden sind. In diesem Fall nutzt man die Media Query "prefers-color-scheme", um zu ermitteln, ob der Nutzer einen dunklen oder hellen Modus eingestellt hat. Anschließend wird das passende Bild geladen. Sollte der Browser oder die Oberfläche das <picture>-Element nicht unterstützen, sorgt das zuletzt angegebene <img>-Element für einen sinnvollen Fallback. So ist garantiert, dass das Bild immer dargestellt wird – auch wenn die dynamische Anpassung nicht greift. Dieser Ansatz bietet gleich mehrere Vorteile. Zum einen wird die visuelle Konsistenz der Dokumentationen erhöht, was das Gesamtbild eines Projekts professioneller und harmonischer macht.
Zum anderen schaffen speziell angepasste Bilder eine angenehme Nutzererfahrung, da sie weniger anstrengend für die Augen sind und besser in den jeweiligen UI-Kontext passen. Dies kann gerade bei umfangreichen Readmes, Tutorials oder Dokumentationsseiten zu einer merklichen Verbesserung der Lesbarkeit und Nutzerzufriedenheit beitragen. Die technische Umsetzung dieses Verfahrens ist unkompliziert und gut in vorhandene Workflows integrierbar. Der Code-Snippet für ein Bild, das sich an den Farbmodus anpasst, sieht folgendermaßen aus: Man verwendet das <picture>-Element und definiert innerhalb dessen zwei <source>-Elemente, eines für den dunklen und eines für den hellen Modus, jeweils mit der entsprechenden Media Query und der Quelle des jeweiligen Bildes. Ergänzt wird das Ganze durch ein <img>-Element, das als Fallback dient und eine allgemeine Bildquelle bereitstellt.
Diese Kombination stellt sicher, dass unabhängig von der Umgebung immer ein Bild geladen wird, das den Umständen bestmöglich entspricht. In der Praxis bedeutet das für Entwickler beispielsweise, dass sie zwei Versionen eines Screenshots, Logos oder Illustrationen anlegen – eine für den Dark Mode mit dunklem oder transparentem Hintergrund, die zweite für den Light Mode mit hellem Hintergrund. Beide Bilder werden dann gemeinsam in das Repositorium hochgeladen und über den <picture>-Code im Markdown eingebunden. Die Nutzer auf GitHub sehen so automatisch immer das Bild, das am besten zu ihrem UI-Modus passt, ohne dass dafür manuelle Eingriffe nötig wären. Diese Technik überzeugt zudem durch große Flexibilität. Sie eignet sich nicht nur für GitHub-README-Dateien, sondern auch für ausführliche Dokumentationen, Wikis oder andere Markdown-Dateien, die auf GitHub gehostet werden.
Jeder Entwickler, der Wert darauf legt, dass seine Projekte auch bei wechselnden Darstellungsoptionen modern und ansprechend erscheinen, sollte dieses Know-how in seine Arbeitsweise integrieren. Ein weiterer Vorteil ist die Kompatibilität mit modernen Browsern und der GitHub-Oberfläche. Während das <picture>-Element und die Media Queries mittlerweile bestens unterstützt werden, sorgt der Fallback durch das <img>-Element dafür, dass auch in älteren oder weniger gängigen Umgebungen dennoch eine Bilddarstellung erfolgt. Somit ist man auf der sicheren Seite und kann sich darauf verlassen, dass die Inhalte jederzeit zugänglich bleiben. Abschließend erleichtert die Methode nicht nur das Design von GitHub-Projekten, sondern trägt auch zu einer nachhaltigen und adaptiven Gestaltung von technischen Dokumentationen bei. In Zeiten vielfältiger Nutzerpräferenzen und dynamischer Plattformen ist es ein wertvolles Werkzeug, das den Komfort sowohl für Entwickler als auch für deren Zielgruppen erhöht.
Wer seine Markdown-Inhalte mit diesem einfachen Kniff aufwertet, hebt die eigene Arbeit auf ein neues Level und setzt ein klares Zeichen für Qualität und Detailverliebtheit in der Softwareentwicklung. Zusammenfassend lässt sich sagen, dass das Anpassen von Bildern an Dark und Light Mode auf GitHub mittels des <picture>-Elements und der cleveren Nutzung von Media Queries nicht nur ästhetische Vorteile bringt, sondern auch einen modernen Standard im Bereich der Software-Dokumentation setzt. Es lohnt sich für jeden Entwickler, diese Technik zu beherrschen und im eigenen Projekt umzusetzen, um eine optimale Bilddarstellung und Benutzererfahrung zu gewährleisten.
