Skip to content
7 changes: 6 additions & 1 deletion apps/frontend/src/content/docs/docs/cards/stats.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ You can pass a query parameter `&show=` to show any specific additional stats wi
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show=contributions,reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_authored,prs_commented,prs_reviewed,issues_authored,issues_commented)
```

:::note
`contributions` counts contributions across all years;
the `contribs` item under `&hide=` counts repositories contributed to.
:::

## Showing icons

To enable icons, you can pass `&show_icons=true` in the query param, like so:
Expand Down Expand Up @@ -83,7 +88,7 @@ You can customize the appearance and behavior of the stats card using the [commo
| `show` | Shows [additional items](#showing-additional-individual-stats) on the stats card (i.e. `contributions`, `reviews`, `discussions_started`, `discussions_answered`, `prs_merged` or `prs_merged_percentage`. And the following, which support the `repo` and `owner` filters: `prs_authored`, `prs_commented`, `prs_reviewed`, `issues_authored` or `issues_commented`). | string (comma-separated values) | `null` |
| `commits_year` | Filters and counts only commits made in the specified year. | integer _(YYYY)_ | `<current year> (one year to date)` |

<sup>1</sup>: This parameter supports light and dark mode. You can use `ring_color_light` and `ring_color_dark` to specify different colors for light and dark mode.
<sup>1</sup>: Supports light and dark mode via `ring_color_light` and `ring_color_dark`.

:::caution[Warning]
Custom title should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) (i.e: `Anurag's GitHub Stats` should become `Anurag%27s%20GitHub%20Stats`). You can use [urlencoder.org](https://www.urlencoder.org/) to help you do this automatically.
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/content/docs/docs/cards/top-languages.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ You can customize the appearance and behavior of the top languages card using th
| `count_weight` | Configures language stats algorithm (see [Language stats algorithm](#language-stats-algorithm)). | integer | `0` |
| `stats_format` | Switches between two available formats for language's stats `percentages` and `bytes`. | enum | `percentages` |

<sup>1</sup>: This parameter supports light and dark mode. You can use `prog_bar_bg_color_light` and `prog_bar_bg_color_dark` to specify different colors for light and dark mode.
<sup>1</sup>: Supports light and dark mode via `prog_bar_bg_color_light` and `prog_bar_bg_color_dark`.

:::caution[Warning]
Language names and custom title should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) (i.e: `c++` should become `c%2B%2B`, `jupyter notebook` should become `jupyter%20notebook`, `Most Used Languages` should become `Most%20Used%20Languages`, etc.) You can use [urlencoder.org](https://www.urlencoder.org/) to help you do this automatically.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Every card accepts the options below, on top of the exclusive options listed on
| `locale` | Sets the language in the card, you can check full list of available locales [here](/frontend/docs/customization/locales/). | enum | `en` |
| `border_radius` | Corner rounding on the card. | number | `4.5` |

<sup>1</sup>: These parameters support light and dark mode. You can use `*_light` and `*_dark` variants to specify different values for light and dark mode. For example, `title_color_light` and `title_color_dark` will set the title color for light and dark mode respectively.
<sup>1</sup>: Support light and dark mode via `*_light` / `*_dark` variants (e.g. `title_color_light`). See [Light & Dark Mode Parameters](/frontend/docs/customization/theming/#light--dark-mode-parameters) for the precedence rules.

:::caution[Warning]
We use caching to decrease the load on our servers (see [this discussion](https://github.com/anuraghazra/github-readme-stats/issues/1471#issuecomment-1271551425)). Cards generated by [https://github-stats-extended.vercel.app/](https://github-stats-extended.vercel.app/frontend) are usually cached for a few days. If you need your card data to update more frequently, you can [deploy your own instance](/frontend/docs/deploy/) and set the [`CACHE_SECONDS`](/frontend/docs/deploy/#available-environment-variables) environment variable to your preferred value. Alternatively, you can use the [GitHub Actions workflow](/frontend/docs/deploy/#github-action) to update your cards on a schedule.
Expand Down
80 changes: 40 additions & 40 deletions apps/frontend/src/content/docs/docs/customization/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Theming

With inbuilt themes, you can customize the look of the card without doing any [manual customization](/frontend/docs/customization/common-options/).

Use `&theme=THEME_NAME` parameter like so :
Pass `&theme=THEME_NAME`:

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
Expand All @@ -16,20 +16,22 @@ GitHub Stats Extended comes with several built-in themes (e.g. `radical`, `merko

<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="GitHub Stats Extended Themes" width="600px"/>

We recommend using `light_github` for light mode and `dark_github` for dark mode. These themes match GitHub's default light and dark themes, ensuring that your stats card looks consistent with the rest of your profile. For repository cards and gist cards we recommend using `light_github_repocard` and `dark_github_repocard`, which use a different icon color.
:::tip
Use `light_github` and `dark_github` to match GitHub's own light and dark themes. For repository and gist cards use `light_github_repocard` and `dark_github_repocard`, which differ only in icon color.
:::

You can look at a preview for [all available themes](/frontend/docs/customization/themes/) or checkout the [theme config file](https://github.com/stats-organization/github-stats-extended/blob/master/packages/core/src/themes/index.ts). Please note that we paused the addition of new themes to decrease maintenance efforts; all pull requests related to new themes will be closed.
Preview [all available themes](/frontend/docs/customization/themes/) or read the [theme config file](https://github.com/stats-organization/github-stats-extended/blob/master/packages/core/src/themes/index.ts). We have paused the addition of new themes to reduce maintenance effort; pull requests adding one will be closed.

## Light and Dark Mode

<img class="card-preview-light" src="/api?username=anuraghazra&show_icons=true&theme=light_github" alt="Anurag's GitHub stats" />
<img class="card-preview-dark" src="/api?username=anuraghazra&show_icons=true&theme=dark_github" alt="Anurag's GitHub stats" />

There are several methods you can use to create dynamic themes on the client side.
There are several ways to switch a card between modes on the client side.

### Use GitHub's media feature (recommended)

You can use [GitHub's media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) in HTML to specify which image to display in light or dark mode. This is done using the HTML `<picture>` element in combination with the `prefers-color-scheme` media feature.
[GitHub's media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) picks the image from a `<picture>` element using the `prefers-color-scheme` media query.

<!-- prettier-ignore -->
```html
Expand All @@ -43,15 +45,15 @@ You can use [GitHub's media feature](https://github.blog/changelog/2022-05-19-sp
</picture>
```

For example the image at the top of the Responsive Card Theme section works like this - it follows the theme you set for this page.

### Set light and dark mode in one card

Use the `theme_light` and `theme_dark` or `*_light` / `*_dark` color parameters to embed both modes in a single card URL. See [Light & Dark Mode Parameters](#light--dark-mode-parameters) below for full details. The card will then display in light mode or dark mode based on your browser / operating system settings.
`theme_light` / `theme_dark` and the `*_light` / `*_dark` color parameters put both modes in a single card URL, which then follows the viewer's browser or OS setting. See [Light & Dark Mode Parameters](#light--dark-mode-parameters) for the details.

This approach doesn't use any GitHub-specific features, so it works even when embedding the card outside of GitHub. Or on your GitHub sponsorship page, which doesn't support the other, GitHub-specific approaches.
Nothing here is GitHub-specific, so it also works outside GitHub — including sponsorship pages, where the other approaches do not.

However, unlike with the "media" feature or the theme context tag, if a user chooses a GitHub theme different from their browser/OS setting, the card will not be able to detect this. Since GitHub re-uploads the cards and serves them from their [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), we can not infer the GitHub theme with this approach, only the browser/OS theme.
:::note
GitHub serves the card from its [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), so a GitHub theme that differs from the browser/OS setting cannot be detected.
:::

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github)
Expand All @@ -60,24 +62,46 @@ However, unlike with the "media" feature or the theme context tag, if a user cho
<details>
<summary>👀 Show example</summary>

![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github)
![Anurag's GitHub stats](/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github)

</details>

### Light & Dark Mode Parameters

These parameters style each mode separately.

**Priority (lowest → highest):**

- default theme
- `theme`
- `theme_light` / `theme_dark`
- general color parameters
- `*_light` / `*_dark` color parameters

For example:

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github)
```

Types can be mixed — a light and a dark theme, plus one fixed title color:

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github&title_color=aabbcc)
```

### 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's GitHub theme. 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:
Appending `#gh-dark-mode-only` or `#gh-light-mode-only` to an image URL shows it only to viewers on that [GitHub theme](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/):

```md
[![Anurag's GitHub stats-Dark](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark_github#gh-dark-mode-only)](https://github.com/stats-organization/github-stats-extended#gh-dark-mode-only)
[![Anurag's GitHub stats-Light](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=light_github#gh-light-mode-only)](https://github.com/stats-organization/github-stats-extended#gh-light-mode-only)
```

For example the image at the top of the Responsive Card Theme section works like this - it follows the theme you set for this page.

### 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:
The `transparent` theme has no background, so it sits well on GitHub's light and dark themes:

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent)
Expand All @@ -92,7 +116,7 @@ We have included a `transparent` theme that has a transparent background. This t

### Add transparent alpha channel to a themes bg\_color

You can use the `bg_color` parameter to make any of [the available themes](/frontend/docs/customization/themes/) transparent. This is done by setting the `bg_color` to a color with a transparent alpha channel (i.e. `bg_color=00000000`):
Any of [the available themes](/frontend/docs/customization/themes/) turns transparent when `bg_color` carries an alpha channel (i.e. `bg_color=00000000`):

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000)
Expand All @@ -104,27 +128,3 @@ You can use the `bg_color` parameter to make any of [the available themes](/fron
![Anurag's GitHub stats](/api?username=anuraghazra&show_icons=true&bg_color=00000000)

</details>

## Light & Dark Mode Parameters

You can use the `theme_light`, `theme_dark`, and `*_light` / `*_dark` color parameters to customize the look of your card for different modes.

**Priority (lowest → highest):**

- default theme
- `theme`
- `theme_light` / `theme_dark`
- general color parameters
- `*_light` / `*_dark` color parameters

for example:

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github)
```

You can mix different parameter types. For example, set a light theme and a dark theme, but choose a custom title color:

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme_light=light_github&theme_dark=dark_github&title_color=aabbcc)
```
14 changes: 8 additions & 6 deletions apps/frontend/src/content/docs/docs/fork.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,27 +34,29 @@ GitHub-Stats-Extended fetches up to 1000 of your starred repositories to accurat

### Light and dark mode in a single card URL

GitHub-Stats-Extended adds `theme_light`, `theme_dark`, and `*_light` / `*_dark` color parameter variants (e.g. `title_color_light`, `title_color_dark`) that let you embed both light and dark mode in a single card URL. The card will automatically switch between the two based on the viewer's browser or OS theme setting.
GitHub-Stats-Extended adds `theme_light`, `theme_dark` and the `*_light` / `*_dark` color variants (e.g. `title_color_light`), which hold both modes in one card URL. The card then follows the viewer's browser or OS setting.

```md
![Anurag's GitHub stats](https://github-stats-extended.vercel.app/api?username=anuraghazra&theme_light=light_github&theme_dark=dark_github)
```

This approach works on any platform, not just GitHub - and on GitHub sponsorship pages, which don't support the other approaches to light/dark theming. See [Set light and dark mode in one card](/frontend/docs/customization/theming/#set-light-and-dark-mode-in-one-card) for full documentation.
It works anywhere, including GitHub sponsorship pages, where the other light/dark approaches do not. See [Set light and dark mode in one card](/frontend/docs/customization/theming/#set-light-and-dark-mode-in-one-card) for the details.

### GitHub-themed light and dark themes

GitHub-Stats-Extended adds `light_github` and `dark_github` [themes](/frontend/docs/customization/themes/) that exactly match GitHub's default light and dark UI colors. For repo and gist cards, use `light_github_repocard` and `dark_github_repocard` instead, which use a different icon color.
GitHub-Stats-Extended adds `light_github` and `dark_github` [themes](/frontend/docs/customization/themes/) matching GitHub's own UI colors. Repo and gist cards have `light_github_repocard` and `dark_github_repocard`, which differ only in icon color.

### New Contributions stat

GitHub-Stats-Extended adds an optional stat showing the total number of [contributions](https://docs.github.com/en/account-and-profile/reference/profile-contributions-reference#what-counts-as-a-contribution) (commits, pull requests, issues, etc.) across all years of a user's GitHub history. Add `&show=contributions` to your stats card URL to enable it. Whether private contributions are counted depends on [your GitHub profile visibility settings](https://docs.github.com/en/account-and-profile/how-tos/contribution-settings/manage-visibility-settings-for-private-contributions-and-achievements#changing-the-visibility-of-your-private-contributions).
GitHub-Stats-Extended adds an optional stat counting every [contribution](https://docs.github.com/en/account-and-profile/reference/profile-contributions-reference#what-counts-as-a-contribution) commits, pull requests, issues across all years of a user's history; enable it with `&show=contributions`. Private contributions count only if [your profile visibility settings](https://docs.github.com/en/account-and-profile/how-tos/contribution-settings/manage-visibility-settings-for-private-contributions-and-achievements#changing-the-visibility-of-your-private-contributions) allow it.

Note that the pre-existing "Contributed to" stat indicates the number of repositories a user has contributed to, not the number of contributions.
:::note
The pre-existing "Contributed to" stat counts repositories, not contributions.
:::

### Customization of top languages card

GitHub-Stats-Extended allows you to display your top languages without any numbers via the `hide_values` parameter. And the `prog_bar_bg_color` parameter allows you to customize the background color of the progress bars, e.g. by setting it to transparent:
GitHub-Stats-Extended can show your top languages without numbers via `hide_values`, and `prog_bar_bg_color` sets the bar background — here transparent:

<img class="card-preview-light" src="/api/top-langs?username=anuraghazra&langs_count=4&hide_values=true&prog_bar_bg_color=0000&theme=light_github" alt="anuraghazra's top languages without numbers" />
<img class="card-preview-dark" src="/api/top-langs?username=anuraghazra&langs_count=4&hide_values=true&prog_bar_bg_color=0000&theme=dark_github" alt="anuraghazra's top languages without numbers" />
Expand Down