mirror of
https://github.com/System-End/github-readme-stats.git
synced 2026-04-19 19:55:16 +00:00
* Document auto theme change in README #2074 * Document auto theme change in README Document auto theme change in README #2074 (update-1) * Document auto theme change updates #2074 * docs: improve dynamic theme documentation Co-authored-by: rickstaa <rick.staa@outlook.com>
This commit is contained in:
Falguni Sarkar
GitHub
parent
199870aa9f
commit
45f434f083
1 changed files with 90 additions and 0 deletions
90
readme.md
90
readme.md
|
|
@ -85,6 +85,7 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
|
|||
- [Top Languages Card](#top-languages-card)
|
||||
- [Wakatime Week Stats](#wakatime-week-stats)
|
||||
- [Themes](#themes)
|
||||
- [Responsive Card Theme](#responsive-card-theme)
|
||||
- [Customization](#customization)
|
||||
- [Common Options](#common-options)
|
||||
- [Stats Card Exclusive Options](#stats-card-exclusive-options)
|
||||
|
|
@ -156,6 +157,95 @@ GitHub readme stats comes with several built-in themes (e.g. `dark`, `radical`,
|
|||
|
||||
You can look at a preview for [all available themes](./themes/README.md) or checkout the [theme config file](./themes/index.js) & **you can also contribute new themes** if you like :D
|
||||
|
||||
#### Responsive Card Theme
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
|
||||
|
||||
Since GitHub will re-upload the cards and serve them from their [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), we can not infer the browser/GitHub theme on the server side. There are, however, four methods you can use to create dynamics themes on the client side:
|
||||
|
||||
##### Use the transparent theme
|
||||
|
||||
We have included a `transparent` theme that has a transparent background. This theme is optimized to look good on GitHub's dark and light default themes. You can enable this theme using the `&theme=transparent` parameter like so:
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>:eyes: Show example</summary>
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
##### Add transparent alpha channel to a themes bg_color
|
||||
|
||||
You can use the `bg_color` parameter to make any of [the available themes](./themes/README.md) transparent. This is done by setting the `bg_color` to a colour with a transparent alpha channel (i.e. `bg_color=00000000`):
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>:eyes: Show example</summary>
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
##### Use GitHub's theme context tag
|
||||
|
||||
You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) tags to switch the theme based on the user GitHub theme automatically. This is done by appending `#gh-dark-mode-only` or `#gh-light-mode-only` to the end of an image URL. This tag will define whether the image specified in the markdown is only shown to viewers using a light or a dark GitHub theme:
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>:eyes: Show example</summary>
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
|
||||
[](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
|
||||
|
||||
</details>
|
||||
|
||||
##### Use GitHub's new media feature
|
||||
|
||||
You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) in HTML to specify whether to display images for light or dark themes. This is done using the HTML `<picture>` element in combination with the `prefers-color-scheme` media feature.
|
||||
|
||||
```html
|
||||
<picture>
|
||||
<source
|
||||
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<source
|
||||
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true"
|
||||
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
|
||||
/>
|
||||
<img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true" />
|
||||
</picture>
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>:eyes: Show example</summary>
|
||||
|
||||
<picture>
|
||||
<source
|
||||
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<source
|
||||
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true"
|
||||
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
|
||||
/>
|
||||
<img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true" />
|
||||
</picture>
|
||||
|
||||
</details>
|
||||
|
||||
### Customization
|
||||
|
||||
You can customize the appearance of your `Stats Card` or `Repo Card` however you wish with URL parameters.
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue