Changing README.md image display conditional to GitHub light-mode / dark-mode

Question

Is it possible to change README.md image display in GitHub that is conditional to GitHub's dark-mode and light-mode? Perhaps a simple conditional I can put in my README.md.

Answer 1

⚠️ UPDATE - 22-6-2022

The old method of specifying images based on the theme, by using a fragment appended to the URL (#gh-dark-mode-only or #gh-light-mode-only), is deprecated and will be removed ... [source]

✨ NEW METHOD

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/w.png">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/b.png">
  <img alt="Shows a black logo in light color mode and a white one in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

^ SOURCE | DEMONSTRATION | MORE INFO

⚠️ OLD METHOD

It is now possible to conditionally specify what image to be displayed based on the theme, by using the below keywords at the end of the desired light\dark-themed image-link.

#gh-dark-mode-only	#gh-light-mode-only

^ examples of use :

<p align="center">
    <img src="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/b.png#gh-light-mode-only" height="120" width="120"/>
    <img src="https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/w.png#gh-dark-mode-only" height="120" width="120"/>
</p>

![GitHub-Mark-Light](https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/b.png#gh-light-mode-only)
![GitHub-Mark-Dark ](https://raw.githubusercontent.com/GiorgosXou/Random-stuff/main/Programming/StackOverflow/Answers/70200610_11465149/w.png#gh-dark-mode-only)

Make sure the images are stored in github else they won't display dynamically based on the theme. For more informations click here and here

Answer 2

You can now specify whether to display images for light or dark themes in Markdown, using the HTML <picture> element in combination with the prefers-color-scheme media feature.

For example:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

Reference: https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/

Answer 3

To go with Giorgos "NEW METHOD" answer, here's what works for me for SVGs.

1. Put the .svg in its own file; and use <style> to describe the default light colors, and the alternate dark colors, for the elements of the svg, e.g. <g> in this example.

<svg viewBox="0 0 182 27" xmlns="http://www.w3.org/2000/svg">
  <style>
    g { fill: black; }
    @media (prefers-color-scheme: dark) {
      g { fill: white; }
    }
  </style>

  <g stroke-linecap="round" fill-rule="evenodd">
     ...
  </g>
</svg>

2. In the README.md, link the .svg like you'd link an image

![logo](docs/logo.svg)

NOTE: turns out this isn't working on desktop Safari, mobile Safari, and all other iOS browsers (which use mobile Safari). Hopefully I find a technique that does work.