Theming

With inbuilt themes, you can customize the look of the card without doing any manual customization.

Pass &theme=THEME_NAME:

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

All inbuilt themes

GitHub Stats Extended comes with several built-in themes (e.g. radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula).

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.

Preview all available themes or read the theme config file. We have paused the addition of new themes to reduce maintenance effort; pull requests adding one will be closed.

Light and Dark Mode

There are several ways to switch a card between modes on the client side.

Use GitHub’s media feature (recommended)

GitHub’s media feature picks the image from a <picture> element using the prefers-color-scheme media query.

<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>

Set light and dark mode in one card

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 for the details.

This approach is not GitHub-specific, so it also works outside GitHub — including GitHub sponsorship pages, where the other approaches don’t work.

Note

GitHub serves the card from its CDN, so a GitHub theme that differs from the browser/OS setting cannot be detected by this approach.

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

👀 Show example

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:

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

Parameter types can be mixed — for example a light and a dark theme, plus one fixed title color:

![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

Appending #gh-dark-mode-only or #gh-light-mode-only to an image URL shows it only to viewers on that GitHub mode:

[![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)

Use the transparent theme

The transparent theme has no background, so it sits well on GitHub’s light and dark modes:

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

👀 Show example

Add transparent alpha channel to a themes bg_color

Any of the available themes turns transparent when bg_color carries an alpha channel (i.e. bg_color=00000000):

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

👀 Show example