docs: render logo in black on light-mode READMEs (#3812)

Use a <picture> element with prefers-color-scheme so the white logo on
pi.dev stays visible in dark mode and a black variant is shown in light
mode. GitHub's HTML sanitizer strips style attributes and inline SVG, so
the two-file pattern is the only reliable theme-aware approach.

Co-authored-by: julien-agent <Agents+cyolo@huggingface.co>
This commit is contained in:
Julien Chaumond
2026-04-30 10:18:23 +02:00
committed by GitHub
parent e91a303c59
commit ab7dbd3091
2 changed files with 10 additions and 2 deletions

View File

@@ -1,6 +1,10 @@
<p align="center">
<a href="https://pi.dev">
<img src="https://pi.dev/logo.svg" alt="pi logo" width="128">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://pi.dev/logo.svg">
<source media="(prefers-color-scheme: light)" srcset="https://huggingface.co/buckets/julien-c/my-training-bucket/resolve/pi-logo-dark.svg">
<img alt="pi logo" src="https://pi.dev/logo.svg" width="128">
</picture>
</a>
</p>
<p align="center">

View File

@@ -1,6 +1,10 @@
<p align="center">
<a href="https://pi.dev">
<img src="https://pi.dev/logo.svg" alt="pi logo" width="128">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://pi.dev/logo.svg">
<source media="(prefers-color-scheme: light)" srcset="https://huggingface.co/buckets/julien-c/my-training-bucket/resolve/pi-logo-dark.svg">
<img alt="pi logo" src="https://pi.dev/logo.svg" width="128">
</picture>
</a>
</p>
<p align="center">