GitHub Stats Extended
Dynamically generate GitHub stats for your READMEs.
-
+
+
##### 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 light/dark mode. 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/stats-organization/github-stats-extended#gh-dark-mode-only)
-[](https://github.com/stats-organization/github-stats-extended#gh-light-mode-only)
+[](https://github.com/stats-organization/github-stats-extended#gh-dark-mode-only)
+[](https://github.com/stats-organization/github-stats-extended#gh-light-mode-only)
```
:eyes: Show example
+ + + +:eyes: Show example
-[](https://github.com/stats-organization/github-stats-extended#gh-dark-mode-only) -[](https://github.com/stats-organization/github-stats-extended#gh-light-mode-only) +[](https://github.com/stats-organization/github-stats-extended#gh-dark-mode-only) +[](https://github.com/stats-organization/github-stats-extended#gh-light-mode-only)
-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`.
+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.
You can look at a preview for [all available themes](../packages/core/src/themes/README.md) or checkout the [theme config file](../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.
@@ -125,7 +125,7 @@ Use the `theme_light` and `theme_dark` or `*_light` / `*_dark` color parameters
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.
-However, 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.
+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.
```md
diff --git a/docs/fork.md b/docs/fork.md
index 8043c5a3fd1e7..7c54556014e2c 100644
--- a/docs/fork.md
+++ b/docs/fork.md
@@ -30,6 +30,20 @@ GitHub-Stats-Extended proactively precomputes and caches cards. This solves the
GitHub-Stats-Extended fetches up to 1000 of your starred repositories to accurately compute your stars count. In github-readme-stats, this is limited to 100 repos because github-readme-stats doesn't have the above-mentioned performance improvements.
+### 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.
+
+```md
+
+```
+
+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](advanced_documentation.md#set-light-and-dark-mode-in-one-card) for full documentation.
+
+### GitHub-themed light and dark themes
+
+GitHub-Stats-Extended adds `light_github` and `dark_github` [themes](../packages/core/src/themes/README.md) 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.
+
### 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 white:
From ad1049581007dd71f25f1271e78caa20487d928b Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Fri, 7 Aug 2026 12:22:46 +0200
Subject: [PATCH 5/8] docs: revert unnecessary change
---
docs/advanced_documentation.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/advanced_documentation.md b/docs/advanced_documentation.md
index 0792ec46bc574..e8ffe4d1cb915 100644
--- a/docs/advanced_documentation.md
+++ b/docs/advanced_documentation.md
@@ -140,7 +140,7 @@ However, unlike with the "media" feature or the theme context tag, if a user cho
##### 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 light/dark mode. 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:
+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:
```md
[](https://github.com/stats-organization/github-stats-extended#gh-dark-mode-only)
From 34d08882a7613d300039739d578a30f42357faff Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com>
Date: Sat, 8 Aug 2026 20:32:42 +0200
Subject: [PATCH 6/8] fix: refinements and bugfixes for new themes (#462)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Found while reviewing #457.
1. Dark themes rendered a near-white border.
`dark_github` / `dark_github_repocard` had no `border_color` and fell
back to the default theme's `e4e2e2`.
Set GitHub's borders on all four new themes: `d1d9e0` light, `3d444d`
dark.
2. Excluding `default` / `default_repocard` broke the theme picker.
`Home.tsx` initializes to one of them and treats it as "emit no `theme=`
param", so stage 3 opened with nothing selected and the theme-less URL
became unreachable.
3. Paired themes were shown for the wrong card type.
The picker now takes `isRepoCard` and lists only the matching variant,
hiding duplicates while keeping each card type's `default` visible.
4. Theme README generator only knew the `default` pair, so the new
themes would land in the wrong tables.
5. 3 and 4 share a rule, kept duplicated on purpose: which themes to
advertise per card type is presentation, not rendering, so it stays out
of core's API.
Both copies carry `Keep in sync` comments pointing at each other.
6. Dead docs anchor left by the `Responsive Card Theme` ➡️ `Light and
Dark Mode` rename.
7. Core gains one export: the `ThemeName` type, replacing the private
duplicate `ThemeNames` in `cards/types.ts` and the `keyof typeof themes`
casts in `color.ts` and the picker.
---
apps/frontend/src/pages/Home/Home.tsx | 1 +
apps/frontend/src/pages/Home/stages/Theme.tsx | 33 ++++-
docs/advanced_documentation.md | 4 +-
.../core/scripts/generate-theme-readme.js | 20 ++-
packages/core/src/cards/types.ts | 5 +-
packages/core/src/common/color.ts | 3 +-
packages/core/src/index.ts | 1 +
packages/core/src/themes/README.md | 118 ++++++++++--------
packages/core/src/themes/index.ts | 9 ++
9 files changed, 125 insertions(+), 69 deletions(-)
diff --git a/apps/frontend/src/pages/Home/Home.tsx b/apps/frontend/src/pages/Home/Home.tsx
index 7c22adef91d09..9dcde4eabceb0 100644
--- a/apps/frontend/src/pages/Home/Home.tsx
+++ b/apps/frontend/src/pages/Home/Home.tsx
@@ -252,6 +252,7 @@ export function HomeScreen({ stage, setStage }: HomeScreenProps): JSX.Element {
{themeList.map((myTheme) => {
- const themeColors = themes[myTheme as keyof typeof themes];
+ const themeColors = themes[myTheme];
return (