Badge not in dark mode on initial page load with dark GitHub theme

[birkjernstrom]

I was using a single GitHub theme (Dark dimmed) and noticed that our badge remained in light mode on the initial page load of the issue; I hit refresh and it changed into dark mode. However, in the "Sync with system" mode it works without any issues on the initial page load.

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog :^)

[frankie567]

Can reproduce this consistently.

Dark dimmed theme (from navigation)

Here is the code output by GitHub when coming from another page (rendered in light mode):

<picture>
  <source media="not all" srcset="https://camo.githubusercontent.com/ea950ce09bdb3c96a90659c1a63877a380c0250011eccb0889085ef702435d2e/68747470733a2f2f706f6c61722e73682f6170692f6769746875622f706f6c6172736f757263652f706f6c61722f6973737565732f313034332f706c656467652e7376673f6461726b6d6f64653d31" data-canonical-src="https://polar.sh/api/github/polarsource/polar/issues/1043/pledge.svg?darkmode=1" class="source-dark source-light">
  <img alt="Fund with Polar" src="https://camo.githubusercontent.com/1c4d6c60fc8075ad4ee92ca9a73499ddf06be34dd9faadeea31fd8ddadf4ee92/68747470733a2f2f706f6c61722e73682f6170692f6769746875622f706f6c6172736f757263652f706f6c61722f6973737565732f313034332f706c656467652e737667" data-canonical-src="https://polar.sh/api/github/polarsource/polar/issues/1043/pledge.svg" style="visibility:visible;max-width:100%;">
</picture>

Dark dimmed theme (from page load)

Here is the code rendered on hard reload (rendered correctly in dark mode):

<picture>
  <source media="(prefers-color-scheme: light),(prefers-color-scheme: dark)" srcset="https://camo.githubusercontent.com/ea950ce09bdb3c96a90659c1a63877a380c0250011eccb0889085ef702435d2e/68747470733a2f2f706f6c61722e73682f6170692f6769746875622f706f6c6172736f757263652f706f6c61722f6973737565732f313034332f706c656467652e7376673f6461726b6d6f64653d31" data-canonical-src="https://polar.sh/api/github/polarsource/polar/issues/1043/pledge.svg?darkmode=1" class="source-dark">
  <img alt="Fund with Polar" src="https://camo.githubusercontent.com/1c4d6c60fc8075ad4ee92ca9a73499ddf06be34dd9faadeea31fd8ddadf4ee92/68747470733a2f2f706f6c61722e73682f6170692f6769746875622f706f6c6172736f757263652f706f6c61722f6973737565732f313034332f706c656467652e737667" data-canonical-src="https://polar.sh/api/github/polarsource/polar/issues/1043/pledge.svg" style="visibility:visible;max-width:100%;">
</picture>

OS synced theme

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://camo.githubusercontent.com/ea950ce09bdb3c96a90659c1a63877a380c0250011eccb0889085ef702435d2e/68747470733a2f2f706f6c61722e73682f6170692f6769746875622f706f6c6172736f757263652f706f6c61722f6973737565732f313034332f706c656467652e7376673f6461726b6d6f64653d31" data-canonical-src="https://polar.sh/api/github/polarsource/polar/issues/1043/pledge.svg?darkmode=1">
  <img alt="Fund with Polar" src="https://camo.githubusercontent.com/1c4d6c60fc8075ad4ee92ca9a73499ddf06be34dd9faadeea31fd8ddadf4ee92/68747470733a2f2f706f6c61722e73682f6170692f6769746875622f706f6c6172736f757263652f706f6c61722f6973737565732f313034332f706c656467652e737667" data-canonical-src="https://polar.sh/api/github/polarsource/polar/issues/1043/pledge.svg" style="visibility:visible;max-width:100%;">
</picture>

It seems to generate the media query wrong not-all instead of (prefers-color-scheme: dark).

Needs more investigation, but starts to smell like a GitHub bug.

[frankie567]

I can confirm this happens with their official example in the docs:

People have reported similar issues here:

• prefers-color-scheme is incorrect when using light default in Night theme github/markup#1583
• Dark mode image only loads on fresh load github/markup#1681

I'll also file our case there!

[birkjernstrom]

Unfortunate, but not entirely unexpected given the bug behaviour. Good to know it's not on our end and hopefully they fix it in the near future.