Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Update logo in README #5298

Merged
merged 1 commit into from Jun 23, 2022
Merged

Update logo in README #5298

merged 1 commit into from Jun 23, 2022

Conversation

mattt
Copy link
Contributor

@mattt mattt commented Jun 22, 2022

The logo used in the current README hardcodes the fill value for its text to #24292E. This causes the text to have a contrast ratio of 1.02:1 against its background color (#22272E) when viewed in dark mode.

README before

This PR updates the README to replace the <img> element with a <picture> containing image sources with light and dark media queries. 1

<h1 align="center">
    <picture>
        <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/7659/174594540-5e29e523-396a-465b-9a6e-6cab5b15a568.svg">
        <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/7659/174594559-0b3ddaa7-e75b-4f10-9dee-b51431a9fd4c.svg">
        <img src="https://user-images.githubusercontent.com/7659/174594540-5e29e523-396a-465b-9a6e-6cab5b15a568.svg" alt="Dependabot" width="336">
    </picture>
</h1>

The embedded SVGs are uploaded directly to GitHub, whereas the previous was hot-linked from our AWS bucket.

Here's how the README looks after applying these changes:

README after

Footnotes

  1. https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to ↩

@mattt
Update logo in README
6250c09 
Replace SVG with version that uses light text in dark mode

Use picture element with media queries
@mattt mattt requested a review from a team as a code owner June 22, 2022 16:39
landongrindheim
landongrindheim approved these changes Jun 22, 2022
View reviewed changes
Copy link
Member

@landongrindheim landongrindheim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🌚 -> 😄
🌞 -> 😄

@mattt mattt merged commit 69c8c38 into main Jun 23, 2022
@mattt mattt deleted the mattt/update-logo branch June 23, 2022 00:59
@Nishnha Nishnha mentioned this pull request Jun 24, 2022
Merged
jeffwidman added a commit to dependabot/fetch-metadata that referenced this pull request Sep 18, 2022
@jeffwidman
Fix broken logo on readme
5ecfd58 
The current logo is broken. So replace with the new one.

Copied from dependabot/dependabot-core#5298.

🎩 💁‍♂️  to @mattt 's attention to detail including supporting both light and dark themes.
@jeffwidman jeffwidman mentioned this pull request Sep 18, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@landongrindheim landongrindheim landongrindheim approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@mattt @landongrindheim