[FEATURE REQUEST] Add support for prefers-color-scheme

[alvinsjoy]

Feature requested

GitHub has a prefers-color-scheme setting to set color of images/icons by checking for the default theme used by the user.
Skill-icons currently does not work on the GitHub readme when using prefers-color-scheme.
Here's an example readme where prefers-color-scheme is used but is not supported by skill-icons.
Related issue: #927

[LelouchFR]

We've been working on it on the newest version of the project here but it is going to take some time, since I have to make all the icons by hand to implement the prefers-color-scheme (which actually just going to be a auto theme, where you just would have to say &theme=auto)

[alvinsjoy]

Hi @LelouchFR,
Thanks for the reply.
Is it possible to keep the theme setting as it is and make it work according to the prefers-color-scheme tag?
Example:

<picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://go-skill-icons.vercel.app/api/icons?i=c,java,python&theme=dark" />
      <img src="https://go-skill-icons.vercel.app/api/icons?i=c,java,python&theme=light">
</picture>

In this code you dont have to create an option &theme=auto. GitHub will automatically do it accordingly.
Also please do correct me if I am wrong.

[LelouchFR]

Hey @alvinsjoy , The point of the feature of &theme=auto is to make you not having to write all this html to get the same result (on paper) which can save a lot of time for people not knowing html or the magic of the web

[alvinsjoy]

Hi @LelouchFR ,
Thank you for pointing that out! I understand that the &theme=auto is designed to simplify the process by eliminating the need to write extensive HTML, which is indeed a great time-saver, especially for those not well-versed in HTML.
I see you have pinned the issue at LelouchFR/skill-icons#11 and giving it top priority. Wishing you all the very best!

[LelouchFR]

@alvinsjoy I'm try harding for it right now, so it might go out at the end of the day. Praying it works xD

[LelouchFR]

@alvinsjoy it's live !! just one thing, it might not seem to work for the global prefers-color-scheme on github, but if you change the appearance of your github to light, it will change the icons to light, vice versa. it works all fine ! I'm happy, it has been a long thing to do :P

[alvinsjoy]

That's fantastic news! 🎉 I'm glad to hear it's working well overall. I just tested the icons on my GitHub readme and it works perfectly!
It's been a journey indeed, and your hard work is much appreciated!