docs: serve theme-aware logo variants in readme#242
Merged
Conversation
split the single logo asset into dark and light variants and switch the readme header to a <picture> element so the rendered logo follows the github theme. the light variant uses dark glyphs on a near-white background, keeping the green accent in both versions so the brand mark stays consistent across themes. the fallback inside <picture> points at the light variant because readers on platforms that don't honor prefers-color-scheme (most social shares, packagist's readme mirror) typically render on white.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Split the single
images/logo.pngasset intologo-dark.png(existing artwork, on its black canvas) andlogo-light.png(luminance-flipped variant for white backgrounds), then switch the README header to a<picture>element that follows the GitHub theme.Why
The original logo was a white mark on a black canvas. On GitHub's light theme it rendered as a hard black rectangle at the top of the README — readable, but disruptive to the page flow. A theme-aware
<picture>lets the logo blend with the surrounding canvas on both themes without losing brand recognizability.The green accent (shield check, end-cap dots, "-contract-testing" suffix) is preserved across both variants so the mark reads as the same logo regardless of theme.
Verification
<picture>fallback<img>points at the light variant — most off-GitHub renderers (Packagist mirror, social shares preview) draw on white and do not honorprefers-color-scheme.Notes for reviewers
If the light variant looks too clinical, the trivially-tweakable knobs are in commit
760d915: the dark-text floor color (currently(18, 22, 28)for warmth) and the green-pixel detection threshold. Happy to dial either.