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.

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

Dark mode image only loads on fresh load #1681

Open
evoactivity opened this issue Apr 8, 2023 · 14 comments
Open

Dark mode image only loads on fresh load #1681

evoactivity opened this issue Apr 8, 2023 · 14 comments
Labels

Comments

@evoactivity
Copy link

As can be seen in this repo README logo file , click on issues then back to code and the light image will be loaded instead of dark.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./logo-dark.svg">
  <img alt="XMLTV. TypeScript tools for working with EPG data." src="./logo.svg">
</picture>
@osiegmar
Copy link

osiegmar commented May 13, 2023

The bug goes even further. None of the <source> elements will be used but the fallback <img>.

Markdown source:

<picture>
    <source media="(prefers-color-scheme: dark)" type="image/avif" srcset="...">
    <source media="(prefers-color-scheme: light)" type="image/avif" srcset="...">
    <img src="..." alt="">
</picture>

First (or refresh) load (works correctly, shows the first source):

<picture>
    <source media="(prefers-color-scheme: light),(prefers-color-scheme: dark)" type="image/avif" srcset="..." class="source-dark">
    <source media="not all" type="image/avif" srcset="..." class="source-light">
    <img src="..." alt="" style="visibility:visible;max-width:100%;">
</picture>

Navigate back (works incorrectly, shows the fallback img):

<picture>
    <source media="not all" type="image/avif" srcset="..." class="source-dark source-light">
    <source media="not all" type="image/avif" srcset="..." class="source-light">
    <img src="..." alt="" style="visibility:visible;max-width:100%;">
</picture>

@frankie567
Copy link

We also experience this behavior. It seems to work with the Sync with system setting but not when manually selecting a single dark theme.

On page navigation, GitHub renders the media query as not all, as @osiegmar pointed out.

@evoactivity
Copy link
Author

Just noticed this seems resolved now? If others confirm I'll close this issue.

@frankie567
Copy link

Just noticed this seems resolved now? If others confirm I'll close this issue.

Just tried again, doesn't seem fixed on my side. It works when using Sync with system but not when manually selecting a dark theme.

@evoactivity
Copy link
Author

I have the Dark Default theme manually selected, but I also have several feature previews turned on that may be where the fixes are.

  • New Repository Overview
  • Global Navigation Update

@frankie567
Copy link

Hmm... Still happening here. Maybe they're currently rolling out changes?

Capture d’écran 2023-09-13 à 17 19 57

@evoactivity
Copy link
Author

I played with it a bit more, seems inconsistent, sometimes it loads the correct image.

@osiegmar
Copy link

I created a repository for demonstration purposes including steps to reproduce: https://github.com/osiegmar/github-dark-mode-bug

Feel free to send pull requests if you know more scenarios.

Copy link

Stale issue message

@frankie567
Copy link

This is still true as of July 2024 😊

Copy link

Stale issue message

@evoactivity
Copy link
Author

Still an issue

Copy link

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@github-actions github-actions bot added the Stale label Nov 16, 2024
@evoactivity
Copy link
Author

Not stale

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants