GitHub Readme Stats 的主题系统提供了一种无需手动指定颜色即可自定义所有统计卡片视觉外观的方式。本文档描述了主题的定义结构、主题的使用方法、可用的主题以及主题文档的生成过程。有关布局和显示参数等其他自定义选项的信息，请参阅布局和显示选项。
主题系统包含三个主要组件：主题定义、卡片渲染器中的主题应用机制以及主题文档生成器。
来源：themes/index.js1-467 scripts/generate-theme-doc.js1-118
GitHub Readme Stats 中的主题在 themes/index.js 文件中被定义为具有特定颜色属性的 JavaScript 对象。每个主题都是一组命名的颜色集合，用于控制渲染卡片的各种元素。
主题对象包含以下颜色属性
该系统提供了两个默认主题
以下是默认主题的比较
| 属性 | 默认 | default_repocard |
|---|---|---|
| title_color | 2f80ed | 2f80ed |
| icon_color | 4c71f2 | 586069 |
| text_color | 434d58 | 434d58 |
| bg_color | fffefe | fffefe |
| border_color | e4e2e2 | （未定义） |
除了标准的纯色主题外，还有特殊的主题类型
transparent 主题）shadow_red、shadow_green、shadow_blue）ambient_gradient）要将主题应用于任何 GitHub Readme Stats 卡片，请将 ?theme=THEME_NAME 参数添加到卡片 URL。
此示例将 dark 主题应用于统计卡片。主题参数适用于所有卡片类型
GitHub Readme Stats 包含 60 多个内置主题。以下是一些流行主题的示例
| 主题名称 | 描述 |
|---|---|
dark | 深色背景，白色文本和绿色图标 |
radical | 深紫色背景，粉色和黄色点缀 |
merko | 深绿色背景，浅绿色点缀 |
tokyonight | 深蓝色背景，浅蓝色和紫色点缀 |
dracula | 经典的 Dracula 主题，深色背景，粉色/蓝色点缀 |
github_dark | GitHub 的深色主题 |
transparent | 透明背景 |
vue | Vue.js 颜色，浅色背景 |
vue-dark | Vue.js 颜色，深色背景 |
有关可用主题及其视觉示例的完整列表，请参阅themes/README.md 文件。
来源：themes/index.js15-464 themes/README.md14-43
在每个卡片渲染器函数生成卡片时，主题颜色会被应用到卡片元素上。
生成卡片时
theme 参数从 themes 对象中检索请求的主题主题系统包含一个自动文档生成器，该生成器会创建所有可用主题的视觉展示。
来源：scripts/generate-theme-doc.js1-118 scripts/push-theme-readme.sh1-16
文档生成器执行以下主要功能
themes/index.js 读取所有主题定义生成的主题文档会在主题更新时自动推送到仓库。
来源：scripts/generate-theme-doc.js48-116 scripts/push-theme-readme.sh1-16
任何人都可以通过以下方式为 GitHub Readme Stats 项目贡献新主题
themes/index.js 添加新的主题定义| 组件 | 文件 | 目的 |
|---|---|---|
| 主题定义 | themes/index.js | 定义所有可用主题及其颜色属性 |
| 主题文档 | themes/README.md | 展示所有主题及其示例 |
| 文档生成器 | scripts/generate-theme-doc.js | 自动生成主题文档 |
| 文档更新脚本 | scripts/push-theme-readme.sh | 在仓库中更新主题文档 |
来源：themes/index.js1-467 themes/README.md1-235 scripts/generate-theme-doc.js1-118 scripts/push-theme-readme.sh1-16