When i use the GitHub prefers color scheme feature, i can't hide multiple languages

[xxxVitoxxx]

Hello everyone,

Use Markdown syntax

hiding multiple language is working.

Use img tag

hiding multiple language is working.

Use GitHub prefer color scheme feature

even if i hide multiple languages in query, it only hides one language. this is a bug?

Thanks
Vito

[rickstaa]

Hey @xxxVitoxxx,

I think the problem you are experiencing is due to how GitHub handles caching of the card when creating dynamic themes using GitHub's media feature. It looks like the card cache is not reloaded when parameters are changed. I tried to break the cache by appending random=2341562, but it still shows my previous entry. I will open a support ticket with github. I suggest you use another way to create a dynamic theme for now. I, for example, in my profile, use the GitHub context method. I created a support ticket with GitHub to get this solved.

Regular card (MD)

Languages hidden responsive theme (HTML)

<picture>
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs/?username=xxxVitoxxx&theme=dark&hide=go,CSS,javascript,HTML"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs/?username=xxxVitoxxx&hide=go,CSS,javascript,HTML"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=xxxVitoxxx&hide=go,CSS,javascript,HTML"/>
</picture>

Hidden languages (HTML)

[xxxVitoxxx]

thank you so much!

[rickstaa]

@xxxVitoxxx We got a response from GitHub support stating that they forwarded the issue to their engineering team.

[xxxVitoxxx]

thank you very much for your help!

[octatone]

👋

Hi all, just wanted to clarify the root cause of the unexpected behavior here.

For srcset commas are a special character to delimit a collection of image urls, so they need to be properly escaped. If you URI encode &hide=go,CSS,javascript,HTML to &hide=go%2CCSS%2Cjavascript%2CHTML it will just work. See Mozilla srcset docs for more information.

Additionally GitHub only supports one URL in srcset and drops any other comma delimited URLs. That is why if you check the rendered source, the canonical URL attribute ends with &hide=go instead of &hide=go,CSS,javascript,HTML; everything past the first unescaped comma will be dropped.

[rickstaa]

@octatone, excellent! Thanks a lot for explaining the issue. If you add your explanation with the correct syntax as an answer below, I will select it as the accepted answer ❤️‍🔥!

[qwerty541]

@xxxVitoxxx You can use GitHub theme context tag to get desired result.

<a href="https://github.com/xxxVitoxxx#gh-light-mode-only"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=xxxVitoxxx&layout=compact&theme=radical&count_private=true&hide=html,javascript" /></a>
<a href="https://github.com/xxxVitoxxx#gh-dark-mode-only"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=xxxVitoxxx&layout=compact&count_private=true&hide=html,javascript" /></a>

[xxxVitoxxx]

Thank you for help 👍🏻.

[rickstaa]

I just received an email from GitHub support that validates the comment of @octatone.

The right syntax should be:

<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=xxxVitoxxx&hide=go%2CCSS%2Cjavascript%2CHTML"/>

[krosibahili]

Okkkk, let's goooo!