Skip to content

fix: add white stroke to SVG logo text for dark mode visibility (#1319) #1331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 16, 2025

Conversation

Yasir-Rafique
Copy link
Contributor

This PR fixes #1319.

  • Added a white stroke to the SVG logo’s bottom text for visibility on dark backgrounds.
  • Change made directly to media/logo.svg since the .ai source was not available.

Before:

  • Bottom text blends into dark backgrounds and is hard to read.

After:

  • Bottom text is clearly visible in both light and dark mode.

(Tested visually in VS Code and browser dark mode.)

Repository owner deleted a comment from Maqsoodlakho14 Jul 15, 2025
@sindresorhus
Copy link
Owner

Stroke looks really bad. The right solution is to make it white when in dark mode. It's possible to do that in pure SVG.

@Yasir-Rafique
Copy link
Contributor Author

Yasir-Rafique commented Jul 15, 2025

This PR fixes #1319.

  • The SVG banner’s bottom text is now set to a color (#888899) that is readable on both light and dark backgrounds, ensuring visibility in all viewing conditions.
  • SVG media queries (for dark mode) only work when the SVG is embedded inline, not as an <img src="...">. Since the README uses an <img>, a static color is the only compatible solution.
  • If perfect brand color is desired for both themes, separate dark and light SVGs can be created and swapped with site-level CSS, but this is not possible on GitHub READMEs or most OSS banners.

Let me know if this solutions works better!!

Screenshots for both modes are attached below for reference.

image (Dark Mode)

image (Light mode)

@sindresorhus
Copy link
Owner

It is possible to do dynamic color switching inside SVG in an img. I'm doing it in some places. But this solution works well too. Thanks 👍

@sindresorhus sindresorhus merged commit 14c5a88 into sindresorhus:main Jul 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SVG banner's text not visible in dark mode
3 participants