Get the user-selected color theme in Github README

Question

Is it possible to get the user-selected color theme in Github README?

With the possibility of choosing a dark or light theme on Github, it would be useful to show figures on the README file (and other markdowns) accordingly. For instance, if the dark theme is chosen, show a bright version of a figure, and if the light theme is chosen, show a dark version of the figure.

Translucid

Does this answer your question? Changing README.md image display conditional to GitHub light-mode / dark-mode – Droit

Answer 1

It is possible, in that it is done for you, since May 2022 (still beta), GA since Aug. 2022.

Specify theme context for images in Markdown (Beta)

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>

^{An animated screenshot of an issue comment that changes the color mode. The content shows an octobiwan in light and stormtroopocat in dark color mode.}

---

Aug. 2022:

Specify theme context for images in Markdown GA

You can now specify whether to display images for light or dark themes in Markdown, using the HTML 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>

Croesus

Answer 2

Isn't not possible.

Normally this sort of thing would be done easily with a few lines of CSS or perhaps some Javascript. However, for security reasons GitHub will not allow any user provided CSS or JavaScript on its site. Whatever you include in your Markdown files will be stripped out by GitHub's sanitizer as documented in step 2 at github/markup:

2. The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes.

Soberminded