Dynamic themes

[jackdroach]

Is there a way to make a card appear with the GitHub light or dark theme depending on the user's settings?

[lyhsieh]

No. You should choose your theme manually.

[anuraghazra]

GitHub now supports contextual images based on theme. BUT GOD DAMN IT DOESN"T WORK WITH API URLS 😭

https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to

[lyhsieh]

so sad QQ

[idna001]

Dynamic themes would be very nice..
Isn't there a chance to detect the color of the site?
Or make a theme with colors that look on both themes good and readable, with a clear background.

[ghost]

Actually, there is a clever way which was referred in #1268. It makes the background transparent so it looks good on both GitHub themes.

[Mario-paul]

Cool solution, thanks! Putting both solutions together makes the readme look really clean.

[itaditya]

I've solved it by using the #gh-dark-mode-only in anchor href and then place image inside it. Check my profile readme

See it working here-

https://twitter.com/dev__adi/status/1491851695714111488

[rickstaa]

As of today, this also is possible using the HTML <picture> element in combination with the prefers-color-scheme media feature. It is also (for more information, see https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/). Please, however, be aware that in contrast to the method above, this method does not work when people switch the theme without reloading the page.

[rickstaa]

Here is a example:

<a href="https://github.com/anuraghazra/github-readme-stats">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark">
  <img alt="Shows Anuraghazra's GitHub Stats." src="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=default">
</picture>
</a>

[rickstaa]

Here is a example:

<a href="https://github.com/anuraghazra/github-readme-stats">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark">
  <img alt="Shows Anuraghazra's GitHub Stats." src="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=default">
</picture>
</a>

There is one small difference between the GitHub context and GitHub prefers-colour-scheme syntax. The first is directly applied when the GitHub theme is changed in realtime while the latter requires a page reload.

[rickstaa]

All the currently available ways for creating a dynamic theme are now documented in the README.md (See https://github.com/anuraghazra/github-readme-stats#responsive-card-theme).