如何在切换GitHub主题时让仓库卡片颜色适配对应主题？

针对仓库卡片在深色模式下显示不佳的问题，这里提供两种实用解决方案：

方案一：自动适配主题的动态加载 #

通过<picture>标签结合系统主题偏好检测，让卡片根据当前主题自动切换深色/浅色版本：

## 🍋‍🟩 推荐仓库
<div align="center">
    <a href="https://github.com/ProjectsAndPrograms/AnalyserOrange">
        <picture>
            <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=AnalyserOrange&theme=github_dark">
            <img src="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=AnalyserOrange&theme=github_light" alt="AnalyserOrange 仓库">
        </picture>
    </a>
    <a href="https://github.com/ProjectsAndPrograms/contacts-manager">
        <picture>
            <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=contacts-manager&theme=github_dark">
            <img src="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=contacts-manager&theme=github_light" alt="Contacts Manager 仓库">
        </picture>
    </a>
</div>

关键说明： #

• theme=github_dark对应GitHub深色主题样式，theme=github_light对应浅色主题样式，也可替换为其他官方支持的主题（如dark、light、radical等）
• <picture>标签会优先加载符合当前主题的资源，未匹配时默认加载浅色版本

方案二：透明主题适配全模式 #

如果希望卡片自动适配任意背景，可使用透明主题：

## 🍋‍🟩 推荐仓库
<div align="center">
    <a href="https://github.com/ProjectsAndPrograms/AnalyserOrange">
        <img src="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=AnalyserOrange&theme=transparent" alt="AnalyserOrange 仓库">
    </a>
    <a href="https://github.com/ProjectsAndPrograms/contacts-manager">
        <img src="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=contacts-manager&theme=transparent" alt="Contacts Manager 仓库">
    </a>
</div>

关键说明： #

• theme=transparent会让卡片背景变为透明，文字和图标颜色会随GitHub主题自动调整，无需手动切换

内容的提问来源于stack exchange，提问作者Shubham kumar