From a8883aa8b75e198440b5ede78b15eb5829363810 Mon Sep 17 00:00:00 2001
From: Lukasz Raczylo <lukasz@raczylo.com>
Date: Wed, 13 May 2026 02:07:11 +0100
Subject: [PATCH] fix(logo): explicit light/dark variants + <picture> for
 GitHub
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The prior logo.svg used currentColor, which resolves to black when the
SVG is loaded via <img> on GitHub — making the logo invisible in dark
mode (the GitHub default for many users).

Fix uses GitHub's supported <picture> + prefers-color-scheme media-
source pattern in README:

- assets/logo-light.svg — explicit GitHub light-theme text color #24292f
- assets/logo-dark.svg  — explicit GitHub dark-theme text color #f0f6fc
- assets/logo.svg       — kept with embedded @media + currentColor for
                          standalone use (markmorph notes, anywhere
                          else the SVG is loaded outside <picture>)

README updates the <img> tag to a <picture> with media-conditioned
source so GitHub's renderer picks the right variant per theme.
---
 README.md             |  5 ++++-
 assets/logo-dark.svg  | 13 +++++++++++++
 assets/logo-light.svg | 13 +++++++++++++
 assets/logo.svg       | 26 ++++++++++++++++----------
 4 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 assets/logo-dark.svg
 create mode 100644 assets/logo-light.svg

diff --git a/README.md b/README.md
index f12a1c5..e43f528 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
 <div align="center">
 
-<img src="./assets/logo.svg" alt="claude-adam logo" width="128" height="128" />
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./assets/logo-dark.svg">
+  <img src="./assets/logo-light.svg" alt="claude-adam logo" width="128" height="128" />
+</picture>
 
 # claude-adam
 
diff --git a/assets/logo-dark.svg b/assets/logo-dark.svg
new file mode 100644
index 0000000..0665599
--- /dev/null
+++ b/assets/logo-dark.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" width="160" height="160" role="img" aria-label="claude-adam logo">
+  <title>claude-adam</title>
+  <desc>A swaddled baby — rounded A-shape bundle with a face inside and small hands extending from the wrap-band. Dark-background variant.</desc>
+  <g stroke="#f0f6fc">
+    <path d="M 36 134 Q 30 78 80 28 Q 130 78 124 134 Z" fill="none" stroke-width="9" stroke-linejoin="round"/>
+    <path d="M 16 100 L 44 100 Q 80 115 116 100 L 144 100" fill="none" stroke-width="6" stroke-linecap="round"/>
+    <path d="M 75 78 Q 80 82 85 78" fill="none" stroke-width="2.5" stroke-linecap="round"/>
+  </g>
+  <g fill="#f0f6fc">
+    <circle cx="72" cy="64" r="3.2"/>
+    <circle cx="88" cy="64" r="3.2"/>
+  </g>
+</svg>
diff --git a/assets/logo-light.svg b/assets/logo-light.svg
new file mode 100644
index 0000000..d92b360
--- /dev/null
+++ b/assets/logo-light.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" width="160" height="160" role="img" aria-label="claude-adam logo">
+  <title>claude-adam</title>
+  <desc>A swaddled baby — rounded A-shape bundle with a face inside and small hands extending from the wrap-band. Light-background variant.</desc>
+  <g stroke="#24292f">
+    <path d="M 36 134 Q 30 78 80 28 Q 130 78 124 134 Z" fill="none" stroke-width="9" stroke-linejoin="round"/>
+    <path d="M 16 100 L 44 100 Q 80 115 116 100 L 144 100" fill="none" stroke-width="6" stroke-linecap="round"/>
+    <path d="M 75 78 Q 80 82 85 78" fill="none" stroke-width="2.5" stroke-linecap="round"/>
+  </g>
+  <g fill="#24292f">
+    <circle cx="72" cy="64" r="3.2"/>
+    <circle cx="88" cy="64" r="3.2"/>
+  </g>
+</svg>
diff --git a/assets/logo.svg b/assets/logo.svg
index 7c043cb..6e5adc5 100644
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -1,13 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" width="160" height="160" role="img" aria-label="claude-adam logo">
   <title>claude-adam</title>
-  <desc>A swaddled baby — rounded A-shape bundle with a face inside and small hands extending from the wrap-band. Named after the author's newborn son.</desc>
-  <!-- Swaddle bundle (rounded A) -->
-  <path d="M 36 134 Q 30 78 80 28 Q 130 78 124 134 Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/>
-  <!-- Wrap-band extended outward as little hands -->
-  <path d="M 16 100 L 44 100 Q 80 115 116 100 L 144 100" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round"/>
-  <!-- Face: eyes -->
-  <circle cx="72" cy="64" r="3.2" fill="currentColor"/>
-  <circle cx="88" cy="64" r="3.2" fill="currentColor"/>
-  <!-- Tiny mouth -->
-  <path d="M 75 78 Q 80 82 85 78" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+  <desc>A swaddled baby — rounded A-shape bundle with a face inside and small hands extending from the wrap-band. Adapts to light/dark via embedded media query + currentColor fallback.</desc>
+  <style>
+    svg { color: #24292f; }
+    @media (prefers-color-scheme: dark) {
+      svg { color: #f0f6fc; }
+    }
+  </style>
+  <g stroke="currentColor">
+    <path d="M 36 134 Q 30 78 80 28 Q 130 78 124 134 Z" fill="none" stroke-width="9" stroke-linejoin="round"/>
+    <path d="M 16 100 L 44 100 Q 80 115 116 100 L 144 100" fill="none" stroke-width="6" stroke-linecap="round"/>
+    <path d="M 75 78 Q 80 82 85 78" fill="none" stroke-width="2.5" stroke-linecap="round"/>
+  </g>
+  <g fill="currentColor">
+    <circle cx="72" cy="64" r="3.2"/>
+    <circle cx="88" cy="64" r="3.2"/>
+  </g>
 </svg>