feat: light-mode SVG variants for GitHub dark theme compatibility#115
Merged
feat: light-mode SVG variants for GitHub dark theme compatibility#115
Conversation
Adds a full set of light-background SVG tags in assets/tags/light/
that mirror the existing dark-background tags in assets/tags/.
GitHub <picture> element auto-swaps based on the reader's theme:
- GitHub LIGHT theme → dark-bg SVG (original, stands out on white)
- GitHub DARK theme → light-bg SVG (new, stands out on dark)
## 30 light variants generated
Same dimensions, same orange #FF6B35 brand accent, same fonts. Only
the backgrounds and text colors change:
- Background: white → light gray gradient (#FFFFFF → #F8F9FB)
- Border: #E5E7EB (GitHub-style neutral border)
- Title text: #0F172A (slate-900)
- Subtitle text: #64748B (slate-500)
Stat values are slightly darkened for better contrast on white:
- Green: #00D26A → #16A34A
- Orange: #FF6B35 → #EA580C
- Purple: #B5A4FF → #7C3AED
## README changes
All 26 tag references now use <picture> elements:
<picture>
<source media="(prefers-color-scheme: dark)" srcset="assets/tags/light/foo.svg">
<img src="assets/tags/foo.svg" alt="..." height="..." />
</picture>
Covers: 14 section headers (both stat rows × 6 = 12 stat cards).
No visual changes for light-theme readers — the original dark SVGs
still show. Dark-theme readers now get proper contrast instead of
dark-on-dark blend.
All 30 light SVGs validated with xmllint. 654/654 tests passing.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (30)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughREADME.md updated to serve dark-mode image assets using responsive Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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.
Problem
The 30 custom SVG tags from PR #114 have dark backgrounds (`#1A1A1A`). They look great on GitHub's light theme — the dark badges stand out clearly on the white README background.
On GitHub's dark theme, the dark badges blend into the dark README background, hurting readability.
Solution
Add a complete set of light-background SVG variants in `assets/tags/light/` and use GitHub's `` element to auto-swap based on the reader's theme preference.
How GitHub handles it
GitHub supports `prefers-color-scheme` media queries inside `` elements in README files. Pattern:
```html
![\"Benchmarks\"]()
\`\`\`When the reader is on GitHub dark theme, the browser picks the `media="(prefers-color-scheme: dark)"` source (the light-bg SVG). Otherwise it falls through to the `![]()
` default (the dark-bg SVG).
30 light variants
Same dimensions, same orange `#FF6B35` brand accent, same fonts. Changes:
Stat card accent colors were darkened slightly for better contrast against white backgrounds:
Orange brand accent strip is unchanged — it's the consistent brand element across both modes.
README changes
Used a Python regex pass to wrap all 26 tag references in `` elements:
` tags)
No manual edits — one atomic transformation.
Test plan
Summary by CodeRabbit