Auto Apply with browser dark mode

[SamYuan1990]

Hello everyone,

As you know we have dark and light model in browser.
and I am not sure if we are able to auto apply browser setting with this project when usage.

so that we can avoid hard code light/dark in text code and make it auto apply.

Thanks
Sam

[rickstaa]

@SamYuan1990 Thanks for your question. This feature has been discussed in multiple issues and discussions:

• Support different themes on light and dark mode. #1645
• Toggle for the themes background color to match the GitHub dark/light mode background color #1182
• White and dark theme working at the same time #897
• Provide a functionality that inherits background of repo card according to git-hub dark/light mode #777
• A solution so that the stats theme changes with the GitHub theme. #739
• Add dynamic theme selection for cards #1036
• Add support for dark mode #689
• Switch theme depending upon prefers-color-scheme? #414
• [Feature] Dark mode #79
• [Feature] Support for dark mode #693
• Dynamic themes #1415
• Transparent Cards #690
• Dynamic theme based on viewer's github theme? #1880
• Auto Apply with browser dark mode #1684
• Translucent/transparent card themes #1920

For now, people are advised to use this trick

[SamYuan1990]

@rickstaa , it seems won't work for Readme Card for now?

[SamYuan1990]

but it works when I use vs-code to do the review...

[SamYuan1990]

I see... it is strange for me, at git hub it finally works with

which means on github markdown, we need #gh-light-mode-only appears at link url as identifier? but not from the picture source?

[rickstaa]

@SamYuan1990 Sorry for the late reply. I have not used this trick myself so I had to investigate it looks like the right syntax is:

[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=dark#gh-dark-mode-only)](https://github.com/hyperledger-labs/PerformanceSandBox#gh-dark-mode-only)
[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=default#gh-light-mode-only)](https://github.com/hyperledger-labs/PerformanceSandBox#gh-light-mode-only)

or

<a href="https://github.com/itaditya#gh-dark-mode-only">
  <img src="https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=dark#gh-dark-mode-only" alt="My GitHub Stats" />
</a>
<a href="https://github.com/itaditya#gh-light-mode-only">
  <img src="https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=default#gh-light-mode-only" alt="My GitHub Stats" />
</a>

Using the following syntax seems to fail:

![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=dark#gh-dark-mode-only)
![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=default#gh-light-mode-only)

[erikw]

Thanks @rickstaa, I can confirm that this syntax works:

[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=dark#gh-dark-mode-only)](https://github.com/hyperledger-labs/PerformanceSandBox#gh-dark-mode-only)
[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=hyperledger-labs&repo=PerformanceSandBox&theme=default#gh-light-mode-only)](https://github.com/hyperledger-labs/PerformanceSandBox#gh-light-mode-only)

@anuraghazra could we add these syntax instructions to the project README, to make it easier for folks to use pinned repo cards with automatic light/dark mode toggle? :)

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

[SamYuan1990]

I see.

[rickstaa]

Here is an 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]

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