Search code examples
githubreadme

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

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.

Solution

  • ⚠️ 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
    GitHub-Mark-Light GitHub-Mark-Dark

    ^ 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