How can I adjust the repository card's color to match the GitHub theme when switching between different themes?

Question

This appears visually appealing in light mode but not in dark mode. I aim to ensure compatibility with both light and dark themes in my README.md file.

Dark Theme Image

Light Theme image

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

Answer 1

This should be possible to do. The two things you need are a way to have both the light and dark mode images, and to wrap them up in a way GitHub will render them.

The first part is pretty easy. It would appear that the app you're using supports "themes" such as &theme=dark, i.e. stealing one of your links, you can see that this is the darkmode likeness for your contacts-manager project.

As for what html GitHub's markdown rendered supports, that's a little trickier. What html elements are rendered by GitHub isn't exactly easy information to find. If you want, you can go down a rabbit-hole chasing this 12 year old GitHub engineering blog html-pipeline: Chainable Content Filters. The end of that is this list of html elements that GitHub markdown should support.

A more recent GitHub blog specifically for the use of images context between light and dark mode is Specify theme context for images in Markdown (Beta); the app you're using also lists this in their readme Use GitHub's new media feature

You need to replace each <img/> tag with a <picture><source/><img/></picture> tag. An example is;

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="the link to your darkmode image"/>
  <img alt="desc" src="the link to your lightmode image"/>
</picture>

E.g.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=AnalyserOrange&theme=dark"/>
  <img alt="AnalyserOrange repository" src="https://github-readme-stats.vercel.app/api/pin/?username=ProjectsAndPrograms&repo=AnalyserOrange"/>
</picture>