tests: added more tests for themes

chore(themes): Added Prussian theme by @divyakelaskar (#123 )
* Update .gitignore * added new theme * reverted changes in .gitignore
2020-07-21 13:12:15 +05:30 · 2020-07-21 13:04:43 +05:30 · 2020-07-20 23:55:23 +05:30 · 2020-07-20 22:09:39 +05:30 · 2020-07-20 22:02:50 +05:30 · 2020-07-20 21:56:16 +05:30
16 changed files with 1045 additions and 78 deletions
@@ -1,4 +1,4 @@
 .vercel
 .env
 node_modules
-package-lock.json
+package-lock.json
@@ -1,5 +1,10 @@
 require("dotenv").config();
-const { renderError, parseBoolean } = require("../src/utils");
+const {
+  renderError,
+  parseBoolean,
+  clampValue,
+  CONSTANTS,
+} = require("../src/utils");
 const fetchStats = require("../src/fetchStats");
 const renderStatsCard = require("../src/renderStatsCard");

@@ -16,10 +21,11 @@ module.exports = async (req, res) => {
    icon_color,
    text_color,
    bg_color,
+    theme,
+    cache_seconds,
  } = req.query;
  let stats;

-  res.setHeader("Cache-Control", "public, max-age=1800");
  res.setHeader("Content-Type", "image/svg+xml");

  try {
@@ -28,6 +34,14 @@ module.exports = async (req, res) => {
    return res.send(renderError(err.message));
  }

+  const cacheSeconds = clampValue(
+    parseInt(cache_seconds || CONSTANTS.THIRTY_MINUTES, 10),
+    CONSTANTS.THIRTY_MINUTES,
+    CONSTANTS.ONE_DAY
+  );
+
+  res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
+
  res.send(
    renderStatsCard(stats, {
      hide: JSON.parse(hide || "[]"),
@@ -40,6 +54,7 @@ module.exports = async (req, res) => {
      icon_color,
      text_color,
      bg_color,
+      theme,
    })
  );
 };
@@ -1,5 +1,10 @@
 require("dotenv").config();
-const { renderError, parseBoolean } = require("../src/utils");
+const {
+  renderError,
+  parseBoolean,
+  clampValue,
+  CONSTANTS,
+} = require("../src/utils");
 const fetchRepo = require("../src/fetchRepo");
 const renderRepoCard = require("../src/renderRepoCard");

@@ -11,12 +16,13 @@ module.exports = async (req, res) => {
    icon_color,
    text_color,
    bg_color,
+    theme,
    show_owner,
+    cache_seconds,
  } = req.query;

  let repoData;

-  res.setHeader("Cache-Control", "public, max-age=1800");
  res.setHeader("Content-Type", "image/svg+xml");

  try {
@@ -26,12 +32,34 @@ module.exports = async (req, res) => {
    return res.send(renderError(err.message));
  }

+  let cacheSeconds = clampValue(
+    parseInt(cache_seconds || CONSTANTS.THIRTY_MINUTES, 10),
+    CONSTANTS.THIRTY_MINUTES,
+    CONSTANTS.ONE_DAY
+  );
+
+  /*
+    if star count & fork count is over 1k then we are kFormating the text
+    and if both are zero we are not showing the stats
+    so we can just make the cache longer, since there is no need to frequent updates
+  */
+  const stars = repoData.stargazers.totalCount;
+  const forks = repoData.forkCount;
+  const isBothOver1K = stars > 1000 && forks > 1000;
+  const isBothUnder1 = stars < 1 && forks < 1;
+  if (!cache_seconds && (isBothOver1K || isBothUnder1)) {
+    cacheSeconds = CONSTANTS.TWO_HOURS;
+  }
+
+  res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`);
+
  res.send(
    renderRepoCard(repoData, {
      title_color,
      icon_color,
      text_color,
      bg_color,
+      theme,
      show_owner: parseBoolean(show_owner),
    })
  );
@@ -23,6 +23,11 @@
    ·
    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Request Feature</a>
  </p>
+  <p align="center">
+    <a href="readme_cn.md">简体中文</a>
+    ·
+    <a href="readme_es.md">Español</a>
+  </p>
 </p>
 <p align="center">Loved the project? Please consider <a href="https://www.paypal.me/anuraghazra">donating</a> to help it improve!

@@ -30,6 +35,7 @@

 - [GitHub Stats Card](#github-stats-card)
 - [GitHub Extra Pins](#github-extra-pins)
+- [Themes](#themes)
 - [Customization](#customization)
 - [Deploy Yourself](#deploy-on-your-own-vercel-instance)

@@ -49,7 +55,7 @@ _Note: Ranks are calculated based on user's stats, see [src/calculateRank.js](./

 To hide any specific stats, you can pass a query parameter `?hide=` with an array of items you wanna hide.

-> Options: `&hide=["stars","prs","issues","contribs"]`
+> Options: `&hide=["stars","commits","prs","issues","contribs"]`

 ```md
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
@@ -63,30 +69,48 @@ To enable icons, you can pass `show_icons=true` in the query param, like so:
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
 ```

+### Themes
+
+With inbuilt themes you can customize the look of the card without doing any [manual customization](#customization).
+
+Use `?theme=THEME_NAME` parameter like so :-
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+```
+
+#### All inbuilt themes :-
+
+dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
+
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+
+You can look at a preview for [all available themes](./themes/README.md) or checkout the [theme config file](./themes/index.js) & **you can also contribute new themes** if you like :D
+
 ### Customization

 You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params.

 Customization Options:

-| Option      | type      | description                          | Stats Card (default) | Repo Card (default) |
-| ----------- | --------- | ------------------------------------ | -------------------- | ------------------- |
-| title_color | hex color | title color                          | 2f80ed               | 2f80ed              |
-| text_color  | hex color | body color                           | 333                  | 333                 |
-| icon_color  | hex color | icon color                           | 4c71f2               | 586069              |
-| bg_color    | hex color | card bg color                        | FFFEFE               | FFFEFE              |
-| line_height | number    | control the line-height between text | 30                   | N/A                 |
-| hide_rank   | boolean   | hides the ranking                    | false                | N/A                 |
-| hide_title  | boolean   | hides the stats title                | false                | N/A                 |
-| hide_border | boolean   | hides the stats card border          | false                | N/A                 |
-| show_owner  | boolean   | shows owner name in repo card        | N/A                  | false               |
-| show_icons  | boolean   | shows icons                          | false                | N/A                 |
+| Option        | type      | description                          | Stats Card (default) | Repo Card (default) |
+| ------------- | --------- | ------------------------------------ | -------------------- | ------------------- |
+| title_color   | hex color | title color                          | 2f80ed               | 2f80ed              |
+| text_color    | hex color | body color                           | 333                  | 333                 |
+| icon_color    | hex color | icon color                           | 4c71f2               | 586069              |
+| bg_color      | hex color | card bg color                        | FFFEFE               | FFFEFE              |
+| line_height   | number    | control the line-height between text | 30                   | N/A                 |
+| hide_rank     | boolean   | hides the ranking                    | false                | N/A                 |
+| hide_title    | boolean   | hides the stats title                | false                | N/A                 |
+| hide_border   | boolean   | hides the stats card border          | false                | N/A                 |
+| show_owner    | boolean   | shows owner name in repo card        | N/A                  | false               |
+| show_icons    | boolean   | shows icons                          | false                | N/A                 |
+| theme         | string    | sets inbuilt theme                   | 'default'            | 'default_repocard'  |
+| cache_seconds | number    | manually set custom cache control    | 1800                 | 1800                |

- You can also customize the cards to be compatible with dark mode
+> Note on cache: Repo cards have default cache of 30mins (1800 seconds) if the fork count & star count is less than 1k otherwise it's 2hours (7200). Also note that cache is clamped to minimum of 30min and maximum of 24hours

-```md
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
-```
+---

 ### Demo

@@ -102,6 +126,12 @@ Customization Options:

 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)

+- Themes
+
+Choose from any of the [default themes](#themes)
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+
 - Customizing stats card

 ![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
@@ -110,6 +140,8 @@ Customization Options:

 ![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)

+---
+
 # GitHub Extra Pins

 GitHub extra pins allow you to pin more than 6 repositories in your profile using a GitHub readme profile.
@@ -0,0 +1,217 @@
+<p align="center">
+ <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" />
+ <h2 align="center">GitHub Readme Stats</h2>
+ <p align="center">在你的 README 中 获取动态生成的 GitHub 统计信息！</p>
+</p>
+
+  <p align="center">
+    <a href="https://github.com/anuraghazra/github-readme-stats/actions">
+      <img alt="Tests Passing" src="https://github.com/anuraghazra/github-readme-stats/workflows/Test/badge.svg" />
+    </a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">
+      <img alt="Issues" src="https://img.shields.io/github/issues/anuraghazra/github-readme-stats?color=0088ff" />
+    </a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
+      <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
+    </a>
+  </p>
+
+  <p align="center">
+    <a href="#demo">查看 Demo</a>
+    ·
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">报告 bug</a>
+    ·
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">请求增加功能</a>
+  </p>
+</p>
+<p align="center">喜欢这个项目？请考虑<a href="https://www.paypal.me/anuraghazra">捐赠</a>来帮助它完善！
+
+# 特性
+
+- [GitHub 统计卡片](#GitHub-统计卡片)
+- [GitHub 更多置顶](#GitHub-更多置顶)
+- [主题](#主题)
+- [自定义](#自定义)
+- [自己部署](#自己部署)
+
+# GitHub 统计卡片
+
+将这行代码复制到你的 markdown 文件中，简单如此！
+更改 `?username=` 的值为你的 GitHub 用户名。
+
+```md
+[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+_Note: 排名基于用户的统计信息计算得出，详见 [src/calculateRank.js](./src/calculateRank.js)_
+
+### 隐藏个人统计信息
+
+想要隐藏某项统计信息，你可以调用参数 `?hide=`，并调用 你想要隐藏的项目 组成的数组。
+
+> 选项：`&hide=["stars","prs","issues","contribs"]`
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
+```
+
+### 显示图标
+
+想要显示图标，你可以调用 `show_icons=true` 参数，如下：
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
+```
+
+### 主题
+你可以通过现有的主题进行卡片个性化，省去[手动自定义](#自定义)的麻烦。
+
+调用 `?theme=THEME_NAME` 参数，如下：
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+```
+
+#### 所有现有主题：
+
+dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
+
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+
+在 [theme config 文件](./themes/index.js) 中查看更多主题，或者 **贡献新的主题** :D
+
+### 自定义
+
+你可以通过使用 URL 参数的方式，为你的 `Stats Card` 或 `Repo Card` 自定义样式。
+
+自定义选项：
+
+| Option      | type      | description                          | Stats Card (default) | Repo Card (default) |
+| ----------- | --------- | ------------------------------------ | -------------------- | ------------------- |
+| title_color | hex color | 标题颜色                              | 2f80ed               | 2f80ed              |
+| text_color  | hex color | 字体颜色                              | 333                  | 333                 |
+| icon_color  | hex color | 图标颜色                              | 4c71f2               | 586069              |
+| bg_color    | hex color | 卡片背景颜色                           | FFFEFE               | FFFEFE              |
+| line_height | number    | 文字行高                              | 30                   | N/A                 |
+| hide_rank   | boolean   | 隐藏评分等级                           | false                | N/A                 |
+| hide_title  | boolean   | 隐藏卡片标题                           | false                | N/A                 |
+| hide_border | boolean   | 隐藏卡片边框                           | false                | N/A                 |
+| show_owner  | boolean   | 显示 Repo 卡片所属账户用户名             | N/A                  | false               |
+| show_icons  | boolean   | 显示图标                              | false                | N/A                 |
+| theme       | string    | 设置主题                              | 'default'            | 'default_repocard'  |
+
+---
+
+### Demo
+
+- 默认
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
+
+- 隐藏特定数据
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","issues"])
+
+- 显示图标
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
+
+- 主题
+
+从 [默认主题](#主题) 中进行选择
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+
+- 自定义添加卡片
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
+
+- 自定义 Repo 卡片
+
+![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)
+
+---
+
+# GitHub 更多置顶
+
+GitHub 更多置顶 让你使用 README Profile，在个人页面中置顶多于 6 个 repo 。
+
+这波可以！你再也不用受限于最多 6 个置顶了。
+
+### 使用细则
+
+复制粘贴这段代码到你的 README 文件中，并更改链接。
+
+Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
+
+```md
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+### Demo
+
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+
+使用 [show_owner](#自定义) 变量将 Repo 所属账户的用户名包含在内。
+
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true)](https://github.com/anuraghazra/github-readme-stats)
+
+### 提示 (对齐 Repo 卡片)
+
+你通常无法将图片靠边显示。为此，您可以使用以下方法：
+
+```md
+<a href="https://github.com/anuraghazra/github-readme-stats">
+  <img align="left" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
+</a>
+<a href="https://github.com/anuraghazra/convoychat">
+  <img align="left" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
+</a>
+```
+
+## 自己部署
+
+因为 GitHub 的 API 每个小时只允许 5 千次请求，我的 `https://github-readme-stats.vercel.app/api` 很有可能会触发限制
+如果你将其托管在自己的 Vercel 服务器上，那么你就不必为此担心。点击 deploy 按钮来开始你的部署！
+
+注意: 从 [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 开始，我们应该能够处理超过 5千 的请求，并且不会出现宕机问题 :D
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats)
+
+<details>
+ <summary>设置 Vercel 的指导</summary>
+
+1. 前往 [vercel.com](https://vercel.com/)
+1. 点击 `Log in`  
+   ![](https://files.catbox.moe/tct1wg.png)
+1. 点击 `Continue with GitHub` 通过 GitHub 进行登录
+   ![](https://files.catbox.moe/btd78j.jpeg)
+1. 登录 GitHub 并允许访问所有存储库（如果系统这样提示）
+1. Fork 这个仓库
+1. 返回到你的 [Vercel dashboard](https://vercel.com/dashboard)
+1. 选择 `Import Project`  
+   ![](https://files.catbox.moe/qckos0.png)
+1. 选择 `Import Git Repository`  
+   ![](https://files.catbox.moe/pqub9q.png)
+1. 选择 root 并将所有内容保持不变，并且只需添加名为 PAT_1 的环境变量（如图所示），其中将包含一个个人访问令牌（PAT），你可以在[这里](https://github.com/settings/tokens/new)轻松创建（保留默认，并且只需要命名下，名字随便）
+   ![](https://files.catbox.moe/caem5b.png)
+1. 点击 deploy，这就完成了，查看你的域名就可使用 API 了！
+</details>
+
+## :sparkling_heart: 支持这个项目
+
+我尽己所能地进行开源，并且我尽量回复每个在使用项目时需要帮助的人。很明显，这需要时间，但你可以免费享受这些。
+
+然而, 如果你正在使用这个项目并感觉良好，或只是想要支持我继续开发，你可以通过如下方式：
+
+- 在你的 README 中使用 github-readme-stats 时，链接指向会这里 :D
+- Star 并 分享这个项目 :rocket:
+- [![paypal.me/anuraghazra](https://ionicabizau.github.io/badges/paypal.svg)](https://www.paypal.me/anuraghazra) - 你可以通过 PayPal 一次性捐款. 我多半会买一杯 ~~咖啡~~ 茶。:tea:
+
+谢谢！ :heart:
+
+---
+
+欢迎贡献！ <3
+
+用 :heart: 发电，用 JavaScript 制作。
@@ -0,0 +1,219 @@
+<p align="center">
+ <img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" /> 
+ <h2 align="center">GitHub Readme Stats</h2>
+ <p align="center">¡Obtén tus estadísticas de GitHub generadas dinámicamente en tu README!</p>
+</p>
+
+  <p align="center">
+    <a href="https://github.com/anuraghazra/github-readme-stats/actions">
+      <img alt="Tests Passing" src="https://github.com/anuraghazra/github-readme-stats/workflows/Test/badge.svg" />
+    </a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">
+      <img alt="Issues" src="https://img.shields.io/github/issues/anuraghazra/github-readme-stats?color=0088ff" />
+    </a>
+    <a href="https://github.com/anuraghazra/github-readme-stats/pulls">
+      <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/anuraghazra/github-readme-stats?color=0088ff" />
+    </a>
+  </p>
+
+  <p align="center">
+    <a href="#ejemplo">Ve un ejemplo</a>
+    ·
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Reporta un bug</a>
+    ·
+    <a href="https://github.com/anuraghazra/github-readme-stats/issues">Solicita una mejora</a>
+  </p>
+</p>
+<p align="center">¿Te gusta este proyecto? ¡Por favor considera <a href="https://www.paypal.me/anuraghazra">donar</a> para ayudar a mejorarlo!
+
+# Características
+
+- [Tarjeta de estadísticas de GitHub](#tarjeta-de-estadísticas-de-github)
+- [Pins extra de GitHub](#pins-extra-de-github)
+- [Temas](#temas)
+- [Personalización](#personalización)
+- [Despliega por tu cuenta](#despliega-tu-propia-instancia-de-vercel)
+
+# Tarjeta de estadísticas de GitHub
+
+Copia y pega esto en el contenido de tu README.md y listo. ¡Simple!
+
+Cambia el valor `?username=` al nombre de tu usuario de GitHub.
+
+```md
+[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+_Nota: las clasificaciones se calculan basándose en las estadísticas del usuario. Ve [src/calculateRank.js](./src/calculateRank.js)._
+
+### Ocultar estadísticas individualmente
+
+Para ocultar alguna estadística específica, puedes utilizar el parámetro `?hide=` con un arreglo de items que quieras ocultar.
+
+> Opciones: `&hide=["stars","commits","prs","issues","contribs"]`
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
+```
+
+### Mostrar íconos
+
+Para habilitar los íconos, puedes utilizar `show_icons=true` como parámetro, de esta manera:
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
+```
+
+### Temas
+
+Puedes personalizar el aspecto de la tarjeta sin realizar ninguna [personalización manual](#personalización) con los temas incorporados.
+
+Utiliza el parámetro `?theme=THEME_NAME`, de esta manera:
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+```
+
+#### Todos los temas incorporados:
+
+dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
+
+<img src="https://res.cloudinary.com/anuraghazra/image/upload/v1595174536/grs-themes_l4ynja.png" alt="Github Readme Stat Themes" width="600px"/>
+
+Puedes ver una vista previa de [todos los temas disponibles](./themes/README.md) o ver el [archivo de configuración](./themes/index.js) del tema y también **puedes contribuir con nuevos temas** si lo deseas: D
+
+### Personalización
+
+Puedes personalizar el aspecto de tu `Stats Card` o `Repo Card` de la manera que desees con los parámetros URL.
+
+Opciones de personalización:
+
+| Option      | type      | description                   | Stats Card (default) | Repo Card (default) |
+| ----------- | --------- | ----------------------------- | -------------------- | ------------------- |
+| title_color | hex color | color del título              | 2f80ed               | 2f80ed              |
+| text_color  | hex color | color del contenido           | 333                  | 333                 |
+| icon_color  | hex color | color del ícono               | 4c71f2               | 586069              |
+| bg_color    | hex color | color de fondo                | FFFEFE               | FFFEFE              |
+| line_height | number    | controla el line_height       | 30                   | N/A                 |
+| hide_rank   | boolean   | oculta la clasificación       | false                | N/A                 |
+| hide_title  | boolean   | oculta el título              | false                | N/A                 |
+| hide_border | boolean   | oculta el borde               | false                | N/A                 |
+| show_owner  | boolean   | muestra el propietario        | N/A                  | false               |
+| show_icons  | boolean   | muestra los íconos            | false                | N/A                 |
+| theme       | string    | establece un tema incorporado | 'default'            | 'default_repocard'  |
+
+---
+
+### Ejemplo
+
+- Predeterminado
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
+
+- Ocultando estadísticas específicas
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","issues"])
+
+- Mostrando íconos
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
+
+- Temas
+
+Elige uno de los [temas predeterminados](#temas)
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+
+- Personalizando la tarjeta de estadísticas
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
+
+- Personalizando la tarjeta de repositorio
+
+![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)
+
+---
+
+# Pins extra de GitHub
+
+Los pins extra de GitHub te permiten anclar más de 6 repositorios en tu perfil utilizando el archivo README.md.
+
+¡Bien! Ya no estás limitado a 6 repositorios anclados.
+
+### Utilización
+
+Copia y pega este código en tu README.md y cambia los links.
+
+Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`
+
+```md
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+```
+
+### Ejemplo
+
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)
+
+Utiliza la variable [show_owner](#customización) para incluir el nombre de usuario del propietario del repositorio.
+
+[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true)](https://github.com/anuraghazra/github-readme-stats)
+
+### Pequeño consejo (alinear las tarjetas de repositorios)
+
+Usualmente no serías capaz de alinear las imágenes una al lado de otra. Para lograrlo, puedes realizar esto:
+
+```md
+<a href="https://github.com/anuraghazra/github-readme-stats">
+  <img align="left" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
+</a>
+<a href="https://github.com/anuraghazra/convoychat">
+  <img align="left" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
+</a>
+```
+
+## Despliega tu propia instancia de vercel
+
+Desde que la API de GitHub permite solo 5 mil peticiones por hora, es posible que mi `https://github-readme-stats.vercel.app/api` pueda llegar al límite. Si lo alojas en tu propio servidor de Vercel, no tendrás que preocuparte de nada. ¡Clickea en el botón "Deploy" para comenzar!
+
+Nota: debido a esto [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) podríamos manejar más de 5 mil peticiones sin tener ningún problema con el downtime :D
+
+[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats)
+
+<details>
+ <summary>Guía para comenzar en Vercel</summary>
+
+1. Ve a [vercel.com](https://vercel.com/)
+1. Clickea en `Log in`  
+   ![](https://files.catbox.moe/tct1wg.png)
+1. Inicia sesión con GitHub presionando `Continue with GitHub`  
+   ![](https://files.catbox.moe/btd78j.jpeg)
+1. Permite el acceso a todos los repositorios (si se te pregunta)
+1. Haz un Fork de este repositorio
+1. Dirígete de nuevo a tu [Vercel dashboard](https://vercel.com/dashboard)
+1. Selecciona `Import Project`  
+   ![](https://files.catbox.moe/qckos0.png)
+1. Selecciona `Import Git Repository`  
+   ![](https://files.catbox.moe/pqub9q.png)
+1. Selecciona "root" y matén todo como está, simplemente añade tu variable de entorno llamada PAT_1 (como se muestra), la cual contendrá un token de acceso personal (PAT), el cual puedes crear fácilmente [aquí](https://github.com/settings/tokens/new) (mantén todo como está, simplemente asígnale un nombre, puede ser cualquiera que desees)
+   ![](https://files.catbox.moe/caem5b.png)
+1. Clickea "Deploy" y ya está listo. ¡Ve tus dominios para usar la API!
+</details>
+
+## :sparkling_heart: Apoya al proyecto
+
+Casi todos mis proyectos son código-abierto e intento responder a todos los usuarios que necesiten ayuda con alguno de estos proyectos, Obviamente,
+esto toma tiempo. Puedes usar este servicio gratis.
+
+No obstante, si estás utilizando este proyecto y estás feliz con él o simplemente quieres animarme a que siga creando cosas, aquí tienes algunas maneras de hacerlo:
+
+- Darme créditos cuando estés utilizando github-readme-stats en tu README, añadiendo un link a este repositorio :D
+- Dándole una estrella (starring) y compartiendo el proyecto :rocket:
+- [![paypal.me/anuraghazra](https://ionicabizau.github.io/badges/paypal.svg)](https://www.paypal.me/anuraghazra) - Puedes hacerme una única donación a través de PayPal. Probablemente me compraré un ~~café~~ té. :tea:
+
+¡Gracias! :heart:
+
+---
+
+¡Las contribuciones son bienvenidas! <3
+
+Hecho con :heart: y JavaScript.
@@ -52,7 +52,7 @@ const getStyles = ({
      animation: fadeIn 0.8s ease-in-out forwards;
    }
    .stat { 
-      font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
    }
    .stagger { 
      opacity: 0;
@@ -1,7 +1,7 @@
 const {
  kFormatter,
  encodeHTML,
-  fallbackColor,
+  getCardColors,
  FlexLayout,
 } = require("../src/utils");
 const icons = require("./icons");
@@ -16,7 +16,14 @@ const renderRepoCard = (repo, options = {}) => {
    isArchived,
    forkCount,
  } = repo;
-  const { title_color, icon_color, text_color, bg_color, show_owner } = options;
+  const {
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    show_owner,
+    theme = "default_repocard",
+  } = options;

  const header = show_owner ? nameWithOwner : name;
  const langName = primaryLanguage ? primaryLanguage.name : "Unspecified";
@@ -30,10 +37,14 @@ const renderRepoCard = (repo, options = {}) => {
    desc = `${description.slice(0, 55)}..`;
  }

-  const titleColor = fallbackColor(title_color, "#2f80ed");
-  const iconColor = fallbackColor(icon_color, "#586069");
-  const textColor = fallbackColor(text_color, "#333");
-  const bgColor = fallbackColor(bg_color, "#FFFEFE");
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+  });

  const totalStars = kFormatter(stargazers.totalCount);
  const totalForks = kFormatter(forkCount);
@@ -64,7 +75,7 @@ const renderRepoCard = (repo, options = {}) => {
  `;

  const svgForks =
-    totalForks > 0 &&
+    forkCount > 0 &&
    `
    <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
      ${icons.fork}
@@ -82,7 +93,7 @@ const renderRepoCard = (repo, options = {}) => {
      .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; }
      .archive-badge rect { opacity: 0.2 }
      </style>
-      <rect data-testid="card-border" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
+      <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
      <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
        ${icons.contribs}
      </svg>
@@ -1,4 +1,4 @@
-const { kFormatter, fallbackColor, FlexLayout } = require("../src/utils");
+const { kFormatter, getCardColors, FlexLayout } = require("../src/utils");
 const getStyles = require("./getStyles");
 const icons = require("./icons");

@@ -44,14 +44,19 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
    icon_color,
    text_color,
    bg_color,
+    theme = "default",
  } = options;

  const lheight = parseInt(line_height);

-  const titleColor = fallbackColor(title_color, "#2f80ed");
-  const iconColor = fallbackColor(icon_color, "#4c71f2");
-  const textColor = fallbackColor(text_color, "#333");
-  const bgColor = fallbackColor(bg_color, "#FFFEFE");
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+  });

  // Meta data for creating text nodes with createTextNode function
  const STATS = {
@@ -119,15 +124,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
  });

  // Conditionally rendered elements
+
+  const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s";
  const title = hide_title
    ? ""
-    : `<text x="25" y="35" class="header">${name}'s GitHub Stats</text>`;
+    : `<text x="25" y="35" class="header">${name}'${apostrophe} GitHub Stats</text>`;

  const border = hide_border
    ? ""
    : `
    <rect 
-      data-testid="card-border"
+      data-testid="card-bg"
      x="0.5"
      y="0.5"
      width="494"
@@ -1,4 +1,5 @@
 const axios = require("axios");
+const themes = require("../themes");

 const renderError = (message) => {
  return `
@@ -43,6 +44,10 @@ function parseBoolean(value) {
  }
 }

+function clampValue(number, min, max) {
+  return Math.max(min, Math.min(number, max));
+}
+
 function fallbackColor(color, fallbackColor) {
  return (isValidHexColor(color) && `#${color}`) || fallbackColor;
 }
@@ -77,6 +82,46 @@ function FlexLayout({ items, gap, direction }) {
  });
 }

+// returns theme based colors with proper overrides and defaults
+function getCardColors({
+  title_color,
+  text_color,
+  icon_color,
+  bg_color,
+  theme,
+  fallbackTheme = "default",
+}) {
+  const defaultTheme = themes[fallbackTheme];
+  const selectedTheme = themes[theme] || defaultTheme;
+
+  // get the color provided by the user else the theme color
+  // finally if both colors are invalid fallback to default theme
+  const titleColor = fallbackColor(
+    title_color || selectedTheme.title_color,
+    "#" + defaultTheme.title_color
+  );
+  const iconColor = fallbackColor(
+    icon_color || selectedTheme.icon_color,
+    "#" + defaultTheme.icon_color
+  );
+  const textColor = fallbackColor(
+    text_color || selectedTheme.text_color,
+    "#" + defaultTheme.text_color
+  );
+  const bgColor = fallbackColor(
+    bg_color || selectedTheme.bg_color,
+    "#" + defaultTheme.bg_color
+  );
+
+  return { titleColor, iconColor, textColor, bgColor };
+}
+
+const CONSTANTS = {
+  THIRTY_MINUTES: 1800,
+  TWO_HOURS: 7200,
+  ONE_DAY: 86400,
+};
+
 module.exports = {
  renderError,
  kFormatter,
@@ -86,4 +131,7 @@ module.exports = {
  parseBoolean,
  fallbackColor,
  FlexLayout,
+  getCardColors,
+  clampValue,
+  CONSTANTS,
 };
@@ -3,7 +3,7 @@ const axios = require("axios");
 const MockAdapter = require("axios-mock-adapter");
 const api = require("../api/index");
 const renderStatsCard = require("../src/renderStatsCard");
-const { renderError } = require("../src/utils");
+const { renderError, CONSTANTS } = require("../src/utils");
 const calculateRank = require("../src/calculateRank");

 const stats = {
@@ -55,22 +55,29 @@ const error = {

 const mock = new MockAdapter(axios);

+const faker = (query, data) => {
+  const req = {
+    query: {
+      username: "anuraghazra",
+      ...query,
+    },
+  };
+  const res = {
+    setHeader: jest.fn(),
+    send: jest.fn(),
+  };
+  mock.onPost("https://api.github.com/graphql").reply(200, data);
+
+  return { req, res };
+};
+
 afterEach(() => {
  mock.reset();
 });

 describe("Test /api/", () => {
  it("should test the request", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-      },
-    };
-    const res = {
-      setHeader: jest.fn(),
-      send: jest.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data);
+    const { req, res } = faker({}, data);

    await api(req, res);

@@ -79,16 +86,7 @@ describe("Test /api/", () => {
  });

  it("should render error card on error", async () => {
-    const req = {
-      query: {
-        username: "anuraghazra",
-      },
-    };
-    const res = {
-      setHeader: jest.fn(),
-      send: jest.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, error);
+    const { req, res } = faker({}, error);

    await api(req, res);

@@ -97,8 +95,8 @@ describe("Test /api/", () => {
  });

  it("should get the query options", async () => {
-    const req = {
-      query: {
+    const { req, res } = faker(
+      {
        username: "anuraghazra",
        hide: `["issues","prs","contribs"]`,
        show_icons: true,
@@ -109,12 +107,8 @@ describe("Test /api/", () => {
        text_color: "fff",
        bg_color: "fff",
      },
-    };
-    const res = {
-      setHeader: jest.fn(),
-      send: jest.fn(),
-    };
-    mock.onPost("https://api.github.com/graphql").reply(200, data);
+      data
+    );

    await api(req, res);

@@ -132,4 +126,59 @@ describe("Test /api/", () => {
      })
    );
  });
+
+  it("should have proper cache", async () => {
+    const { req, res } = faker({}, data);
+    mock.onPost("https://api.github.com/graphql").reply(200, data);
+
+    await api(req, res);
+
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Content-Type", "image/svg+xml"],
+      ["Cache-Control", `public, max-age=${CONSTANTS.THIRTY_MINUTES}`],
+    ]);
+  });
+
+  it("should set proper cache", async () => {
+    const { req, res } = faker({ cache_seconds: 2000 }, data);
+    await api(req, res);
+
+    expect(res.setHeader.mock.calls).toEqual([
+      ["Content-Type", "image/svg+xml"],
+      ["Cache-Control", `public, max-age=${2000}`],
+    ]);
+  });
+
+  it("should set proper cache with clamped values", async () => {
+    {
+      let { req, res } = faker({ cache_seconds: 200000 }, data);
+      await api(req, res);
+
+      expect(res.setHeader.mock.calls).toEqual([
+        ["Content-Type", "image/svg+xml"],
+        ["Cache-Control", `public, max-age=${CONSTANTS.ONE_DAY}`],
+      ]);
+    }
+
+    // note i'm using block scoped vars
+    {
+      let { req, res } = faker({ cache_seconds: 0 }, data);
+      await api(req, res);
+
+      expect(res.setHeader.mock.calls).toEqual([
+        ["Content-Type", "image/svg+xml"],
+        ["Cache-Control", `public, max-age=${CONSTANTS.THIRTY_MINUTES}`],
+      ]);
+    }
+
+    {
+      let { req, res } = faker({ cache_seconds: -10000 }, data);
+      await api(req, res);
+
+      expect(res.setHeader.mock.calls).toEqual([
+        ["Content-Type", "image/svg+xml"],
+        ["Cache-Control", `public, max-age=${CONSTANTS.THIRTY_MINUTES}`],
+      ]);
+    }
+  });
 });
@@ -3,6 +3,7 @@ const cssToObject = require("css-to-object");
 const renderRepoCard = require("../src/renderRepoCard");

 const { queryByTestId } = require("@testing-library/dom");
+const themes = require("../themes");

 const data_repo = {
  repository: {
@@ -108,13 +109,13 @@ describe("Test renderRepoCard", () => {
    const stylesObject = cssToObject(styleTag.innerHTML);

    const headerClassStyles = stylesObject[".header"];
-    const statClassStyles = stylesObject[".description"];
+    const descClassStyles = stylesObject[".description"];
    const iconClassStyles = stylesObject[".icon"];

    expect(headerClassStyles.fill).toBe("#2f80ed");
-    expect(statClassStyles.fill).toBe("#333");
+    expect(descClassStyles.fill).toBe("#333");
    expect(iconClassStyles.fill).toBe("#586069");
-    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
      "fill",
      "#FFFEFE"
    );
@@ -136,18 +137,86 @@ describe("Test renderRepoCard", () => {
    const stylesObject = cssToObject(styleTag.innerHTML);

    const headerClassStyles = stylesObject[".header"];
-    const statClassStyles = stylesObject[".description"];
+    const descClassStyles = stylesObject[".description"];
    const iconClassStyles = stylesObject[".icon"];

    expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
-    expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
+    expect(descClassStyles.fill).toBe(`#${customColors.text_color}`);
    expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
-    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
      "fill",
      "#252525"
    );
  });

+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderRepoCard(data_repo.repository, {
+        theme: name,
+      });
+
+      const styleTag = document.querySelector("style");
+      const stylesObject = cssToObject(styleTag.innerHTML);
+
+      const headerClassStyles = stylesObject[".header"];
+      const descClassStyles = stylesObject[".description"];
+      const iconClassStyles = stylesObject[".icon"];
+
+      expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`);
+      expect(descClassStyles.fill).toBe(`#${themes[name].text_color}`);
+      expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
+      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+        "fill",
+        `#${themes[name].bg_color}`
+      );
+    });
+  });
+
+  it("should render custom colors with themes", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      title_color: "5a0",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const descClassStyles = stylesObject[".description"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe("#5a0");
+    expect(descClassStyles.fill).toBe(`#${themes.radical.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`
+    );
+  });
+
+  it("should render custom colors with themes and fallback to default colors if invalid", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      title_color: "invalid color",
+      text_color: "invalid color",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const descClassStyles = stylesObject[".description"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`);
+    expect(descClassStyles.fill).toBe(`#${themes.default.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`
+    );
+  });
+
  it("should render archive badge if repo is archived", () => {
    document.body.innerHTML = renderRepoCard({
      ...data_repo.repository,
@@ -176,7 +245,7 @@ describe("Test renderRepoCard", () => {

    expect(queryByTestId(document.body, "stargazers")).toBeDefined();
    expect(queryByTestId(document.body, "forkcount")).toBeNull();
-    
+
    document.body.innerHTML = renderRepoCard({
      ...data_repo.repository,
      stargazers: { totalCount: 0 },
@@ -7,6 +7,7 @@ const {
  queryByTestId,
  queryAllByTestId,
 } = require("@testing-library/dom");
+const themes = require("../themes");

 describe("Test renderStatsCard", () => {
  const stats = {
@@ -34,10 +35,24 @@ describe("Test renderStatsCard", () => {
    expect(getByTestId(document.body, "issues").textContent).toBe("300");
    expect(getByTestId(document.body, "prs").textContent).toBe("400");
    expect(getByTestId(document.body, "contribs").textContent).toBe("500");
-    expect(queryByTestId(document.body, "card-border")).toBeInTheDocument();
+    expect(queryByTestId(document.body, "card-bg")).toBeInTheDocument();
    expect(queryByTestId(document.body, "rank-circle")).toBeInTheDocument();
  });

+  it("should have proper name apostrophe", () => {
+    document.body.innerHTML = renderStatsCard({ ...stats, name: "Anil Das" });
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Anil Das' GitHub Stats"
+    );
+
+    document.body.innerHTML = renderStatsCard({ ...stats, name: "Felix" });
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "Felix' GitHub Stats"
+    );
+  });
+
  it("should hide individual stats", () => {
    document.body.innerHTML = renderStatsCard(stats, {
      hide: "['issues', 'prs', 'contribs']",
@@ -57,7 +72,7 @@ describe("Test renderStatsCard", () => {
  it("should hide_border", () => {
    document.body.innerHTML = renderStatsCard(stats, { hide_border: true });

-    expect(queryByTestId(document.body, "card-border")).not.toBeInTheDocument();
+    expect(queryByTestId(document.body, "card-bg")).not.toBeInTheDocument();
  });

  it("should hide_rank", () => {
@@ -79,7 +94,7 @@ describe("Test renderStatsCard", () => {
    expect(headerClassStyles.fill).toBe("#2f80ed");
    expect(statClassStyles.fill).toBe("#333");
    expect(iconClassStyles.fill).toBe("#4c71f2");
-    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
      "fill",
      "#FFFEFE"
    );
@@ -105,12 +120,80 @@ describe("Test renderStatsCard", () => {
    expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
    expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
    expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
-    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
      "fill",
      "#252525"
    );
  });

+  it("should render custom colors with themes", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      title_color: "5a0",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".stat"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe("#5a0");
+    expect(statClassStyles.fill).toBe(`#${themes.radical.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`
+    );
+  });
+
+  it("should render with all the themes", () => {
+    Object.keys(themes).forEach((name) => {
+      document.body.innerHTML = renderStatsCard(stats, {
+        theme: name,
+      });
+
+      const styleTag = document.querySelector("style");
+      const stylesObject = cssToObject(styleTag.innerHTML);
+
+      const headerClassStyles = stylesObject[".header"];
+      const statClassStyles = stylesObject[".stat"];
+      const iconClassStyles = stylesObject[".icon"];
+
+      expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`);
+      expect(statClassStyles.fill).toBe(`#${themes[name].text_color}`);
+      expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
+      expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+        "fill",
+        `#${themes[name].bg_color}`
+      );
+    });
+  });
+
+  it("should render custom colors with themes and fallback to default colors if invalid", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      title_color: "invalid color",
+      text_color: "invalid color",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const statClassStyles = stylesObject[".stat"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`);
+    expect(statClassStyles.fill).toBe(`#${themes.default.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`
+    );
+  });
+
  it("should hide the title", () => {
    document.body.innerHTML = renderStatsCard(stats, {
      hide_title: true,
@@ -3,6 +3,7 @@ const {
  encodeHTML,
  renderError,
  FlexLayout,
+  getCardColors,
 } = require("../src/utils");

 describe("Test utils.js", () => {
@@ -49,4 +50,48 @@ describe("Test utils.js", () => {
      `<g transform=\"translate(0, 0)\"><text>1</text></g><g transform=\"translate(0, 60)\"><text>2</text></g>`
    );
  });
+
+  it("getCardColors: should return expected values", () => {
+    let colors = getCardColors({
+      title_color: "f00",
+      text_color: "0f0",
+      icon_color: "00f",
+      bg_color: "fff",
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#f00",
+      textColor: "#0f0",
+      iconColor: "#00f",
+      bgColor: "#fff",
+    });
+  });
+
+  it("getCardColors: should fallback to default colors if color is invalid", () => {
+    let colors = getCardColors({
+      title_color: "invalidcolor",
+      text_color: "0f0",
+      icon_color: "00f",
+      bg_color: "fff",
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#2f80ed",
+      textColor: "#0f0",
+      iconColor: "#00f",
+      bgColor: "#fff",
+    });
+  });
+  
+  it("getCardColors: should fallback to specified theme colors if is not defined", () => {
+    let colors = getCardColors({
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#fff",
+      textColor: "#9f9f9f",
+      iconColor: "#79ff97",
+      bgColor: "#151515",
+    });
+  });
 });
@@ -0,0 +1,62 @@
+## Available Themes
+
+With inbuilt themes you can customize the look of the card without doing any manual customization.
+
+Use `?theme=THEME_NAME` parameter like so :-
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true
+```
+
+## Stats
+
+> These themes work both for the Stats Card and Repo Card.
+
+|                               |                                        |                                              |
+| :---------------------------: | :------------------------------------: | :------------------------------------------: |
+| `default` ![default][default] |     `radical` ![radical][radical]      |           `merko` ![merko][merko]            |
+| `gruvbox` ![gruvbox][gruvbox] | `tokyonight` ![tokyonight][tokyonight] |        `onedark` ![onedark][onedark]         |
+|  `cobalt` ![cobalt][cobalt]   |  `synthwave` ![synthwave][synthwave]   | `highcontrast` ![highcontrast][highcontrast] |
+| `dracula` ![dracula][dracula] |          `dark` ![dark][dark]          |         [Add your theme][add-theme]          |
+
+## Repo Card
+
+> These themes work both for the Stats Card and Repo Card.
+
+|                                                          |                                                 |                                                       |
+| :------------------------------------------------------: | :---------------------------------------------: | :---------------------------------------------------: |
+| `default_repocard` ![default_repocard][default_repocard] |     `radical` ![radical][radical_repocard]      |           `merko` ![merko][merko_repocard]            |
+|          `gruvbox` ![gruvbox][gruvbox_repocard]          | `tokyonight` ![tokyonight][tokyonight_repocard] |        `onedark` ![onedark][onedark_repocard]         |
+|           `cobalt` ![cobalt][cobalt_repocard]            |  `synthwave` ![synthwave][synthwave_repocard]   | `highcontrast` ![highcontrast][highcontrast_repocard] |
+|          `dracula` ![dracula][dracula_repocard]          |     `dark` ![dark_repocard][dark_repocard]      |              [Add your theme][add-theme]              |
+
+<!-- Repo Card Theme previews -->
+
+[default_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=default_repocard
+[dark_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dark
+[radical_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=radical
+[merko_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=merko
+[gruvbox_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=gruvbox
+[cobalt_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=cobalt
+[dark_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dark
+[dracula_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=dracula
+[tokyonight_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=tokyonight
+[synthwave_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=synthwave
+[onedark_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=onedark
+[highcontrast_repocard]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=highcontrast
+
+<!-- Stats Theme previews -->
+
+[default]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=default&hide=["contribs","prs"]&cache_seconds=86400
+[dark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&hide=["contribs","prs"]&cache_seconds=86400
+[radical]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=radical&hide=["contribs","prs"]&cache_seconds=86400
+[merko]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=merko&hide=["contribs","prs"]&cache_seconds=86400
+[gruvbox]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=gruvbox&hide=["contribs","prs"]&cache_seconds=86400
+[tokyonight]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=tokyonight&hide=["contribs","prs"]&cache_seconds=86400
+[onedark]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=onedark&hide=["contribs","prs"]&cache_seconds=86400
+[cobalt]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=cobalt&hide=["contribs","prs"]&cache_seconds=86400
+[synthwave]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=synthwave&hide=["contribs","prs"]&cache_seconds=86400
+[highcontrast]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=highcontrast&hide=["contribs","prs"]&cache_seconds=86400
+[dracula]: https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dracula&hide=["contribs","prs"]&cache_seconds=86400
+
+[add-theme]: https://github.com/anuraghazra/github-readme-stats/edit/master/themes/index.js
@@ -0,0 +1,82 @@
+const themes = {
+  default: {
+    title_color: "2f80ed",
+    icon_color: "4c71f2",
+    text_color: "333",
+    bg_color: "FFFEFE",
+  },
+  default_repocard: {
+    title_color: "2f80ed",
+    icon_color: "586069", // icon color is different
+    text_color: "333",
+    bg_color: "FFFEFE",
+  },
+  dark: {
+    title_color: "fff",
+    icon_color: "79ff97",
+    text_color: "9f9f9f",
+    bg_color: "151515",
+  },
+  radical: {
+    title_color: "fe428e",
+    icon_color: "f8d847",
+    text_color: "a9fef7",
+    bg_color: "141321",
+  },
+  merko: {
+    title_color: "abd200",
+    icon_color: "b7d364",
+    text_color: "68b587",
+    bg_color: "0a0f0b",
+  },
+  gruvbox: {
+    title_color: "fabd2f",
+    icon_color: "fe8019",
+    text_color: "8ec07c",
+    bg_color: "282828",
+  },
+  tokyonight: {
+    title_color: "70a5fd",
+    icon_color: "bf91f3",
+    text_color: "38bdae",
+    bg_color: "1a1b27",
+  },
+  onedark: {
+    title_color: "e4bf7a",
+    icon_color: "8eb573",
+    text_color: "df6d74",
+    bg_color: "282c34",
+  },
+  cobalt: {
+    title_color: "e683d9",
+    icon_color: "0480ef",
+    text_color: "75eeb2",
+    bg_color: "193549",
+  },
+  synthwave: {
+    title_color: "e2e9ec",
+    icon_color: "ef8539",
+    text_color: "e5289e",
+    bg_color: "2b213a",
+  },
+  highcontrast: {
+    title_color: "e7f216",
+    icon_color: "00ffff",
+    text_color: "fff",
+    bg_color: "000",
+  },
+  dracula: {
+    title_color: "ff6e96",
+    icon_color: "79dafa",
+    text_color: "f8f8f2",
+    bg_color: "282a36",
+  },
+  prussian: {
+    title_color: "bddfff",
+    icon_color: "38a0ff",
+    text_color: "6e93b5",
+    bg_color: "172f45",
+  },
+};
+
+module.exports = themes;
Author	SHA1	Message	Date
anuraghazra	a8d7e3b5f6	tests: added more tests for themes Test / build (push) Canceled after 0s Details	2020-07-21 13:12:15 +05:30
Divya Kelaskar	815916b3f1	chore(themes): Added Prussian theme by @divyakelaskar (#123 ) * Update .gitignore * added new theme * reverted changes in .gitignore	2020-07-21 13:04:43 +05:30
Manolo Edge	d04d682eb2	docs: edited readme_es, changed "customizar" with "personalizar" (#118 )	2020-07-20 23:55:23 +05:30
José De Freitas	f78136c533	docs(translation): Spanish translation file (#116 ) * Create readme_es.md * Fix typos * Add link to Spanish translation	2020-07-20 22:09:39 +05:30
anuraghazra	f4f277a8e2	docs: added cache_seconds docs & updated themes readme cache to 24hour	2020-07-20 22:02:50 +05:30
Anurag Hazra	a5fa1a0d1b	Merge pull request #117 from anuraghazra/custom-cache feat: added ability to set custom cache	2020-07-20 21:56:16 +05:30
anuraghazra	fdf445d734	feat: added ability to set custom cache Test / build (push) Canceled after 0s Details	2020-07-20 21:43:51 +05:30
Manolo Edge	9fb28c9112	docs: added themes preview (#115 ) * Adding themes.md file * Update and rename THEMES.md to README.md * Added link to theme preview README * Removed Dark/Light sections, combined into 1 table * Update README.md * Updated "Add your theme" link to open in edit mode	2020-07-20 21:10:23 +05:30
TonyTang	8fc85c68b1	docs(translation): Update & Improvements on Existing Simplified Chinese Translation of README (#109 ) * Update Simplified Chinese Version of README * Fix a few characters for a more precise translation. * Fix a character for a more precise translation.	2020-07-20 12:16:04 +05:30
Sreetam Dasandanuraghazra	dd2c7ed278	fix: proper apostrophe in stats card's header * fix: remove 's' after apostrophe if name ends with 's' * fix: respect GITHUB_TOKEN env var before PAT_s * revert: verbose console log for retries * Revert "fix: respect GITHUB_TOKEN env var before PAT_s" This reverts commit 2becbe595c2df4580aa81d690482187b1e6ba512. * test: added test for title apostrophe Co-authored-by: anuraghazra <hazru.anurag@gmail.com>	2020-07-20 00:02:07 +05:30
Anurag Hazra	9a7ed8f192	docs: added themes screenshot	2020-07-19 21:35:57 +05:30
Anurag Hazra	71c63abe3a	Merge pull request #106 from hi120ki/fix-style-collapses-on-stats-card fix: text collapses on stats card with proper macos font fallback	2020-07-19 21:25:13 +05:30
Hi120ki	30da0119bf	fix style collapses on stats card by css font config	2020-07-20 00:24:54 +09:00
Anurag Hazra	2c26329e13	feat: added inbuilt themes (#105 ) * feat: added inbuilt themes * docs: added theming docs * docs: update docs	2020-07-19 20:34:41 +05:30
anuraghazra	b1a7aab7fe	docs: update docs	2020-07-19 20:29:35 +05:30
anuraghazra	9b8faab350	docs: added theming docs	2020-07-19 20:25:47 +05:30
anuraghazra	1417432264	feat: added inbuilt themes	2020-07-19 20:05:57 +05:30
Anurag Hazra	b4a9bd4468	Merge pull request #102 from JalenChuh/master docs(translation): add Chinese translation	2020-07-19 18:08:58 +05:30
Anurag Hazra	f5cd85f11f	Merge pull request #103 from colmugx/patch-1 docs: fix readme hide options	2020-07-19 14:16:06 +05:30
ColMugX	c436ed1121	docs: README.md	2020-07-19 14:33:48 +08:00
Jalen Chuh	f6c901b938	📝 add Chinese translation	2020-07-19 12:00:32 +08:00
Anurag Hazra	e9dc35318b	Merge pull request #100 from anuraghazra/refactor-flex refactor: added FlexLayout for flex layouts	2020-07-18 23:14:47 +05:30