Theming
With inbuilt themes, you can customize the look of the card without doing any manual customization.
Use &theme=THEME_NAME parameter like so :
All inbuilt themes
Section titled “All inbuilt themes”GitHub Stats Extended comes with several built-in themes (e.g. radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula).
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 or checkout the theme config file. Please note that we paused the addition of new themes to decrease maintenance efforts; all pull requests related to new themes will be closed.
Light and Dark Mode
Section titled “Light and Dark Mode”There are several methods you can use to create dynamic themes on the client side.
Use GitHub’s media feature (recommended)
Section titled “Use GitHub’s media feature (recommended)”You can use GitHub’s media feature 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.
<picture> <source srcset="https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark_github" media="(prefers-color-scheme: dark)" /> <!-- light mode --> <img src="https://github-stats-extended.vercel.app/api?username=anuraghazra&show_icons=true&theme=light_github" /></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
Section titled “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 below for full details. The card will then display in light mode or dark mode based on your browser / operating system settings.
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, 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, we can not infer the GitHub theme with this approach, only the browser/OS theme.
👀 Show example
Use GitHub’s theme context tag
Section titled “Use GitHub’s theme context tag”You can use GitHub’s theme context 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:
[](https://github.com/stats-organization/github-stats-extended#gh-dark-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
Section titled “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:
👀 Show example
Add transparent alpha channel to a themes bg_color
Section titled “Add transparent alpha channel to a themes bg_color”You can use the bg_color parameter to make any of the available themes transparent. This is done by setting the bg_color to a color with a transparent alpha channel (i.e. bg_color=00000000):
👀 Show example
Light & Dark Mode Parameters
Section titled “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
themetheme_light/theme_dark- general color parameters
*_light/*_darkcolor parameters
for example:
You can mix different parameter types. For example, set a light theme and a dark theme, but choose a custom title color:
