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.
Asked
Active
Viewed 1,085 times
8
-
2No solution yet, but anyone landing here in the future may want to check up on this thread https://github.community/t/support-theme-context-for-images-in-light-vs-dark-mode/147981 – ankh-morpork Jan 11 '21 at 22:53
-
They just announced the `picture` (with `source` having the `media` query on `prefers-color-scheme`), the "old" https://github.community is being phased down it seems. You can now go to https://github.com/github/feedback/discussions/16910 – Brice May 20 '22 at 00:26
2 Answers
5
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>
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
Giorgos Xou
- 747
- 1
- 6
- 19
1
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/
