Skip to content

README.md: Add responsive logo for light and dark themes#6253

Merged
Alek99 merged 1 commit intomainfrom
masenf/readme-logo-light-dark
Mar 27, 2026
Merged

README.md: Add responsive logo for light and dark themes#6253
Alek99 merged 1 commit intomainfrom
masenf/readme-logo-light-dark

Conversation

@masenf
Copy link
Copy Markdown
Collaborator

@masenf masenf commented Mar 26, 2026

Updated logo display to support light and dark themes in a more standardized way.

https://stackoverflow.com/a/70200610

Updated logo display to support light and dark themes.
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 26, 2026

Greptile Summary

This PR upgrades the README logo to support both light and dark color schemes by wrapping the existing <img> tag inside an HTML5 <picture> element with two <source> entries keyed on prefers-color-scheme.\n\nKey changes:\n- Dark mode renders reflex_light.svg (white-filled paths) β€” confirmed correct by inspecting the SVG fill colors.\n- Light mode renders reflex_dark.svg (#110F1F-filled paths) β€” confirmed correct.\n- Older browsers / clients that don't support <picture> fall back to the original reflex.svg.\n- All three referenced SVG files are present in docs/images/.\n- The width=\"300px\" attribute remains on the inner <img> tag, which is the correct HTML5 placement for <picture> β€” it applies to whichever source is ultimately rendered.

Confidence Score: 5/5

Safe to merge β€” documentation-only change with correct HTML5 picture element usage and all referenced assets verified to exist.

Single-file README change; the picture/source/img pattern is exactly the standard GitHub-supported approach for theme-aware images. Both SVG variants exist in the repo, fill colors match the intended usage, and the fallback img ensures compatibility with clients that don't support picture. No logic, runtime code, or dependencies are touched.

No files require special attention.

Important Files Changed

Filename Overview
README.md Replaces static img tag with a picture element that serves reflex_light.svg for dark mode and reflex_dark.svg for light mode, with reflex.svg as a fallback; both variant SVGs exist in the repo and have the correct fill colors.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Browser loads README] --> B{Supports picture element?}
    B -- No --> C[Render fallback img\nreflex.svg]
    B -- Yes --> D{prefers-color-scheme?}
    D -- dark --> E[Load reflex_light.svg\nwhite logo on dark bg]
    D -- light --> F[Load reflex_dark.svg\ndark logo on light bg]
    D -- not set --> G[No matching source\nFallback to reflex.svg]
Loading

Reviews (1): Last reviewed commit: "README.md: Add responsive logo for light..." | Re-trigger Greptile

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq bot commented Mar 26, 2026

Merging this PR will not alter performance

βœ… 8 untouched benchmarks


Comparing masenf/readme-logo-light-dark (52f7467) with main (1e78f2c)

Open in CodSpeed

@Alek99 Alek99 merged commit 23d9a09 into main Mar 27, 2026
7 checks passed
@Alek99 Alek99 deleted the masenf/readme-logo-light-dark branch March 27, 2026 00:04
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.

2 participants