The Theme Compatibility Problem
An image or stats card that looks stunning on GitHub Dark Default can become unreadable or have ugly white borders when viewed on GitHub Light Default.
The Solution: HTML <picture> Element
GitHub's Markdown parser supports the HTML5 <picture> element paired with media queries targeting (prefers-color-scheme: dark) and (prefers-color-scheme: light):
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api?username=alex&theme=tokyonight">
<source media="(prefers-color-scheme: light)" srcset="https://github-readme-stats.vercel.app/api?username=alex&theme=default">
<img alt="GitHub Stats" src="https://github-readme-stats.vercel.app/api?username=alex&theme=default" />
</picture>Automatic Theme Adaptive Output
ProfileCrest generates theme-adaptive HTML picture markup for all your badges and stats cards.
🚀 Open ProfileCrest Generator