Skip to content

Contrast issue on Microsoft logo #88

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
Closed
jcbhmr opened this issue Nov 26, 2022 · 2 comments · Fixed by #90
Closed

Contrast issue on Microsoft logo #88

jcbhmr opened this issue Nov 26, 2022 · 2 comments · Fixed by #90

Comments

@jcbhmr
Copy link
Contributor

jcbhmr commented Nov 26, 2022

The Microsoft logo on the https://containers.dev/ homepage is currently very white... on a white background.

image

I don't think this was intentional. It's a minor nitpick, I know. Is there a procedure to go about contributing? The contributing.md seems geared towards the spec repo, so I don't really know if you even want contributions from outsiders for this website repo 🤷‍♂️.
@bamurtaugh
Copy link
Member

Hi @jcbhmr, thanks for opening! Yes, we welcome PRs on this repo and any repos in the devcontainers org. Please feel free to submit PRs to this repo!

@jcbhmr
Copy link
Contributor Author

jcbhmr commented Nov 30, 2022

It appears that this is only caused when the viewer is in Dark Mode when @media (prefers-color-scheme: dark) matches.

Light mode Dark mode
image image

It appears to be caused by this:

<picture>
  <source
    srcset="/img/microsoft-logo.png"
    media="(prefers-color-scheme: dark)"
  />
  <img src="/img/microsoft-logo-inverted.png" height="20" alt="Microsoft" />
</picture>

From:

devcontainers.github.io/_includes/footer.html

Line 32 in bf07ad5

<source srcset="{{site.baseurl}}/img/microsoft-logo.png" media="(prefers-color-scheme: dark)"></source>

@jcbhmr jcbhmr mentioned this issue Nov 30, 2022
Merged
bamurtaugh pushed a commit that referenced this issue Nov 30, 2022
@jcbhmr
Remove the <source> that messes it up in dark mode (#90)
26639e2 
Fixes #88

Nothing else changes when dark mode is enabled, so this is the only thing that does.
When it does, it makes it white-on-white which isn't readable.

The reason I removed the <picture> wrapper tag is just personal preference to not
use stuff if it's not needed; and it doesn't seem to be needed when you only have
one <img> and no <source> elements to provide alternatives 🤷‍♂️.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove the <source> that messes it up in dark mode
2 participants
@bamurtaugh @jcbhmr