Document auto theme change in README
See original GitHub issueIs your feature request related to a problem? Please describe.
As explained in #690, it is not yet possible to switch the theme automatically on the Vercel instance. Nevertheless, there are multiple ways to get the card to switch themes on the client side. The methods for doing this (i.e. transparent background
, #gh-dark-mode-only
and source media
) need to be explained in the README so that users are aware these options exist.
Describe the solution you’d like
It would be great if README would have a section for setting up dynamic themes. This section should explain:
- We can not infer the browser theme on the server since GitHub will re-upload the cards and serve them from their CDN (see https://github.com/anuraghazra/github-readme-stats/issues/79#issuecomment-663706819).
- That users can use the
transparent
theme.
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent)
- That users can use
bg_color=00000000
to set a transparent background.
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark&bg_color=00000000)
- They can use GitHub’s theme context tags to switch the theme automatically (see https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) based on the set GitHub theme.
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=default#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
- That they can use GitHub’s new media feature in the HTML
<picture>
element to switch the theme automatically based on the set GitHub theme. This option, however, requires the user to refresh the page before the card theme is updated.
<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>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark">
</picture>
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:15 (2 by maintainers)
Top Results From Across the Web
Automatically switch between day and night themes #1001
In the github night mode, displaying the white README element is really bad~~ ... Automatically switch between day and night themes #1001.
Read more >Dark Mode: Overview & Custom CSS - ReadMe Documentation
If your ReadMe plan doesn't support custom CSS: you'll see a one-time “Enable Dark Mode” button. Once enabled, your project's color scheme will...
Read more >How to add color to GitHub's README.md file - Stack Overflow
One way to add color to a README is by utilising a service that provides placeholder images. For example this Markdown can be...
Read more >Markdown | IntelliJ IDEA Documentation - JetBrains
When you clone a project, there is usually a README.md file with ... Click the corresponding gutter icon or press Ctrl+Shift+F10 while the ......
Read more >Markdown Preview Github Styling - Visual Studio Marketplace
Extension for Visual Studio Code - Changes VS Code's built-in markdown preview to ... auto : Automatically match the editor color theme.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I want to get assigned to this.
Done in #2229.