lukaszraczylo/claude-adam
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/claude-adam.git synced 2026-06-29 02:52:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(logo): explicit light/dark variants + <picture> for GitHub

Browse Source 
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.
This commit is contained in:
Lukasz Raczylo
2026-05-13 02:07:11 +01:00
parent 7ed2aecdfa
commit a8883aa8b7
4 changed files with 46 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4 -1
View File
@@ -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
assets/logo-dark.svg
+13
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 763 B

assets/logo-light.svg
+13
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 764 B

assets/logo.svg
+16 -10
View File
@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 950 B

After

Width:  |  Height:  |  Size: 946 B