Dynamic theme based on viewer's github theme?

[Mario-paul]

How can you make it so someone viewing our readme page sees the cards themed based on their Github theme? For instance, someone viewing my user page with the default Github light theme would get Default (white) readme-stats theme cards, but someone with Dark or High Contrast Github theme would see darkcula or monokai or darkowl themed cards?

[rickstaa]

@Mario-paul Thanks for your question. This topic has been discussed on #1415. I use the solutions given there on my own README. Feel free to fork it and check it out.

[Mario-paul]

@rickstaa thank you chief, that's exactly what I was looking for.

Question, in that thread you mentioned the new and official way to dynamically theme stuff,

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.

given the downside of it, is there any reason to use the new way instead of the original method?

[rickstaa]

@Mario-paul No, it doesn't matter. I chose the old method in my readme since I didn't yet have time to change it. Can you please mark my answer if it solved your question? 🙂

[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).