</br>
📌 Features
🎴 Getting Started
Copy-paste this into your markdown content, and that is it. Simple!
Change the ?username= value to your GitHub username.
[](https://github.com/FajarKim/github-readme-profile)
🎨 Themes
With inbuilt themes, you can customize the look of the card without doing any manual customization.
Use &theme=THEME_NAME parameter like so:
Show Example
All inbuilt themes
GitHub Readme Profile comes with several built-in themes (e.g. transparent, dark, highcontarst).
| Themes |
Preview |
default |
 |
transparent |
 |
dark |
|
highcontrast |
 |
You can look at a preview for all available themes. You can also contribute new themes if you like, contributing guidelines can be found here.
✏️ Customization
You can customize the appearance of all your cards however you wish with URL parameters.
Options
Name |
Description |
Type |
Default value |
title_color
|
Card's title color. |
string (hex color) |
2f80ed
|
text_color
|
Body text color. |
string (hex color) |
434d58
|
icon_color
|
Icons color. |
string (hex color) |
4c71f2
|
border_color
|
Card's border color. Does not apply when hide_border is enabled. |
string (hex color) |
e4e2e2
|
bg_color
|
Card's background color. |
string (hex color or a gradient in the form of angle,start,end) |
fffefe
|
stroke_color
|
Profile image border color. Does not apply when hide_stroke is enabled. |
string (hex color) |
e4e2e2 or border_color query
|
username_color
|
Username text color. |
string (hex color) |
434d58 or text_color query
|
theme
|
Name of the theme, choose from all available themes. |
enum |
default
|
locale
|
Sets the language in the card, you can check full list of available locales here. |
enum |
en
|
border_width
|
Sets the border's width manually. |
number |
1
|
border_radius
|
Corner rounding on the card. |
number</td>
| 4.5
|
</tr>
hide
|
Hides the specified items from stats. |
string (comma-separated values)</td>
| null
|
</tr>
show
|
Shows additional items on stats card. |
string (comma-separated values)</td>
| null
|
</tr>
format
|
Output format card option (i.e. svg, png, or json). |
enum</td>
| svg
|
</tr>
disabled_animations
|
Disables all animations in the card. |
boolean</td>
| false
|
</tr>
hide_border
|
Hides the card's border. |
boolean</td>
| false
|
</tr>
hide_stroke
|
Hides the image's profile stroke in the card. |
boolean</td>
| false
|
</tr>
</table>
#### 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:
```markdown
```
Show Example
#### 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`):
```markdown
```
Show Example
#### 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:
```markdown
[](https://github.com/FajarKim/github-readme-profile#gh-dark-mode-only)
[](https://github.com/FajarKim/github-readme-profile#gh-light-mode-only)
```
Show Example
#### Use gradient color
You can use the `bg_color` parameter to make gradient color. This is done by setting the `bg_color` with format _angle,start,end_ (comma-separated value).
```markdown
```
Show Example
#### Hiding individual stats
You can pass a query parameter `&hide=` to hide any specific stats with comma-separated values.
> Options:
> `&hide=repos,stars,forks,commits,prs,prs_merged,issues,
contributed`
```markdown
```
Show Example
#### Showing additional individual stats
You can pass a query parameter `&show=` to show any specific additional stats with comma-separated values
> Options:
> `&show=reviews,issues_closed,discussions_started,discussions_answered`
```markdown
```
Show Example
#### Available locales
Code |
Locale |
en
|
English |
ar
|
Arabic (العربية) |
fr
|
French (Français) |
id
|
Indonesian (Bahasa Indonesia) |
ja
|
Japanese (日本語) |
ko
|
Korean (한국어) |
See [more](/github-readme-profile/docs/translations.html) available locale. The locale code added to file should be a 2-letter abbreviation from [ISO 639-1](https://www.andiamo.co.uk/resources/iso-language-codes/) or a 4-letter code with a language and country code (eg. `id` or `pt-BR`). Anything appearing in [the list](https://gist.github.com/FajarKim/91516c2aecbfc8bf65f584d528d5f2b1) should be fine. You can also contribute new translations if you like, contributing guidelines can be found [here](/github-readme-profile/CONTRIBUTING.md#%EF%B8%8F-translations-contribution).
```markdown
```
Show Example
## 📑 License
GitHub Readme Profile is released under the MIT license, which grants the following permissions:
- Commercial use
- Modification
- Distribution
- Private use
For more convoluted language, see the [LICENSE](/github-readme-profile/LICENSE).
## Deploy on ▲ Vercel
Step-by-step guide on setting up your own Vercel instance.
1. Go to [vercel.com](https://vercel.com).
2. Click on `Log In`.
3. Sign in with GitHub by pressing `Continue with GitHub`.
4. Sign in to GitHub and allow access to all repositories if prompted.
5. Fork this repository.
6. Go back to your [Vercel dashboard](https://vercel.com/dashboard).
7. To import a project, click the `Add New...` or `+` button and select the `Project` option.
8. Click the Continue with GitHub button, search for the required Git Repository and import it by clicking the `Import` button. Alternatively, you can import a Third-Party Git Repository using the `Import Third-Party Git Repository` link at the bottom of the page.
9. Create a personal access token (PAT) [here](https://github.com/settings/tokens/new) and enable the `repo` and `user` permissions (this allows access to see private repo and user stats).
10. Add the PAT as an environment variable named `GH_TOKEN_1`.
11. Repeat step number 9 and add PAT up to the `GH_TOKEN_3` environment variable.
12. In build and output settings, you set install command toggle and add command `npm install typescript`.
13. Click deploy, and you're good to go. See your domains to use the API!
[](https://vercel.com/import/project?template=https://github.com/FajarKim/github-readme-profile)
## 💳 Credits
This repository contains forked from [tuhinpal/readme-stats-github](https://github.com/tuhinpal/readme-stats-github) and inspired from [anuraghazra/github-readme-stats](https://github.com/anuraghazra/github-readme-stats).
## 💰 Donate
Love the project? Please consider donating to help it improve!
Are you considering supporting the project by donating to me? Please DO NOT!!
Please visit [this link](https://fajarkim.github.io/donate) and make a small donation to help the people in need. A small donation goes a long way. ❤️
### 👥 Contributions
> Contributions are welcome!
Specially thanks ❤️ for contributors bellow:
Want to contribute? Please note our contribution guidelines [here](/github-readme-profile/CONTRIBUTING.md).
[](https://techforpalestine.org/learn-more)
Made with ❤️ and TypeScript
Copyright © 2023-present Rangga Fajar Oktariansyah
