How to fix unreadable images in GitHub dark theme

I use GitHub’s dark theme daily. Sometimes I see README images that are unreadable on the dark theme even though they look fine on the light theme. For example, the etcd repo logo:

In this article, I show how to fix this visibility issue using GitHub’s Markdown syntax.

While the etcd logo is clearly visible on GitHub’s light theme, it’s barely readable on the dark theme.

etcd logo on GitHub light theme

Actual Fix

Use the browser’s prefers-color-scheme media query with the HTML <picture> element so visitors get a light or dark image depending on their GitHub theme.

This solution is mentioned in the GitHub docs:

GitHub docs on adding an image to suit your visitors

Given this, we can fix the etcd logo by replacing:

![etcd Logo](logos/etcd-horizontal-color.svg)

with

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/cncf/artwork/9870640f123303a355611065195c43ac3f27aa19/projects/etcd/horizontal/white/etcd-horizontal-white.png">
  <source media="(prefers-color-scheme: light)" srcset="logos/etcd-horizontal-color.svg">
  <img alt="etcd logo" src="logos/etcd-horizontal-color.svg" width=269 />
</picture>