From ab7dbd3091a720e0390e21ef107ec9e0dd332ce6 Mon Sep 17 00:00:00 2001
From: Julien Chaumond <julien@huggingface.co>
Date: Thu, 30 Apr 2026 10:18:23 +0200
Subject: [PATCH] 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>
---
 README.md                       | 6 +++++-
 packages/coding-agent/README.md | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 322ab787..df05f3ed 100644
--- a/README.md
+++ b/README.md
@@ -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">
diff --git a/packages/coding-agent/README.md b/packages/coding-agent/README.md
index eec277c3..bbb59fd2 100644
--- a/packages/coding-agent/README.md
+++ b/packages/coding-agent/README.md
@@ -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">