Top Languages Card having issues with picture and source elements for light and dark mode

[kennethjmyers]

Describe the bug

I'm trying to use the picture element to switch between light and dark mode views for the top-langs card but I am running into visual issues that I don't see with the stats card. I'm including two tests, one for the version I'm trying to include in my readme, and one where I remove the light mode source. I'm noticing a few things:

1. Light mode and dark mode get used, but everything after the first query seems to get ignored.
   1. in my first test HTML is placed first in the list of languages to hide. This indeed seems to get filtered out, but we can see jupyter notebook and css get left in and are not filtered out as expected.
   2. In my second test, jupyter notebook is placed first. Now jupyter notebook is filtered out but HTML is allowed in
2. This seems mainly an issue with the source element because if you remove the light-mode source and let it default to the img tag, then light mode turns out fine (third test)

What's odd is I'm only seeing this issue on github and not my IDE's preview (I've included screenshots of this, I'm using pycharm in case that's relevant). So Is this somehow an issue on Github's end? I have tested this in chrome and safari and I'm seeing the same results.

First test (copied from readme example, but changed the src link so it uses the top-langs card):

html:

<picture>
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&theme=dark&hide=HTML,CSS,SCSS,Ruby,Jupyter%20Notebook"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&hide=HTML,CSS,SCSS,Ruby,Jupyter%20Notebook"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&hide=HTML,CSS,SCSS,Ruby,Jupyter%20Notebook" />
</picture>

What I'm seeing right now on github (dark mode):

What I see in my IDE preview (dark mode):

IDE preview looks right.

What I'm seeing on github (light mode):

Both light mode and dark mode filter out HTML, but not the others

Second Test - put jupyter notebook first

html:

<picture>
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&theme=dark&hide=Jupyter%20Notebook,HTML,CSS,SCSS,Ruby"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&hide=Jupyter%20Notebook,HTML,CSS,SCSS,Ruby"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&hide=Jupyter%20Notebook,HTML,CSS,SCSS,Ruby" />
</picture>

What I'm seeing right now on github (dark mode):

Jupyter notebook is filtered out (because it is first) but HTML is not filtered out.

What I see in my IDE preview (dark mode):

IDE preview still looks right

Third Test - remove the source element for light color-scheme

html:

<picture>
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&theme=dark&hide=HTML,CSS,SCSS,Ruby,Jupyter%20Notebook"
    media="(prefers-color-scheme: dark)"
  />
  <img src="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&hide=HTML,CSS,SCSS,Ruby,Jupyter%20Notebook" />
</picture>

What I'm seeing right now on github (dark mode):

What I see in my IDE preview (dark mode):

(same as first test, looks correct)

What I'm seeing on github (light mode):

So it seems correct if you don't try to use the source element for light mode.

Expected behavior

All of the query elements should be filtered out, not just the first onw.

Screenshots / Live demo link

see above

Additional context

No response

[qwerty541]

Hey, @kennethjmyers! You have to URL encode the content of hide query string parameter when using picture and source elements. I will add an example below.

<picture>
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&theme=dark&hide=HTML%2CCSS%2CSCSS%2CRuby%2CJupyter%20Notebook"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&hide=HTML%2CCSS%2CSCSS%2CRuby%2CJupyter%20Notebook"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://github-readme-stats.vercel.app/api/top-langs?username=kennethjmyers&show_icons=true&locale=en&layout=compact&hide=HTML%2CCSS%2CSCSS%2CRuby%2CJupyter%20Notebook" />
</picture>

[kennethjmyers]

Thank you so much! web stuff is not really something I'm great at and I had a feeling there was something like this I must be missing.

[qwerty541]

Glad to help! Feel free to contact me if you have any more questions.