search

tandpfun / skill-icons

Showcase your skills on your Github readme or resumé with ease ✨
https://skillicons.dev
MIT License
7.46k stars 1.02k forks source link

[FEATURE REQUEST] Ability to set theme=auto #927

Open shreyas-a-s opened 5 months ago

shreyas-a-s commented 5 months ago

Feature requested

Even though I prefer dark mode always, the one who views my profile might be using a light theme and it would be great to have an auto option so that it detects users browser settings and applies theme based on it.

shreyas-a-s commented 5 months ago

I am not fully sure, but I think it is possible using prefers-color-scheme property of css.

Jeesson commented 5 months ago

Hi there! @shreyas-a-s

I'm so happy you're interested in learning more about this. I've already done the hard work for you and found a great resource that explains how to do this. You can check it out here. Let me know if you have any questions!

shreyas-a-s commented 5 months ago

Wow! Such an interesting and cool way of doing it. Thanks @Jeesson for doing the hard work of finding it and letting me know of such a feature.

I have tried it out and it seems this only works if we use image files like svg, png, etc. and not working well with links like in the case of skill-icons.

This is the code I have tried to implement and it didn't work. It only showed the light mode icons:

<picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://skillicons.dev/icons?i=git,neovim,vim,linux,bash,aws,md,html,css,js,python,c,php&theme=dark&perline=8">
  <source media="(prefers-color-scheme: light)" srcset="https://skillicons.dev/icons?i=git,neovim,vim,linux,bash,aws,md,html,css,js,python,c,php&theme=light&perline=8">
  <img alt="Shows my tech stack in dark mode and light mode." src="https://skillicons.dev/icons?i=git,neovim,vim,linux,bash,aws,md,html,css,js,python,c,php&theme=light&perline=8">
</picture>

Now I have settled on using the links to create svg images and use them in the readme and it works using this code:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/shreyas-a-s/shreyas-a-s/blob/7456db2fddfea17a9c103a805fd7644186a2d04a/tech-stack-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://github.com/shreyas-a-s/shreyas-a-s/blob/7456db2fddfea17a9c103a805fd7644186a2d04a/tech-stack-light.svg">
  <img alt="Shows my tech stack in dark mode and light mode." src="https://github.com/shreyas-a-s/shreyas-a-s/blob/7456db2fddfea17a9c103a805fd7644186a2d04a/tech-stack-light.svg">
</picture>

Have you had any luck directly using the skill-icon link in the code?

Jeesson commented 5 months ago

I'm so happy to say that I absolutely succeeded! I would love to share the result with you, but I think you're already on the right direction!

shreyas-a-s commented 5 months ago

Thanks for the help as well as the inspiring words, @Jeesson. I have played around with it a bit more but having the same conclusion. Not able to directly use links in the code. I would love to see the results you've had.

LelouchFR commented 5 months ago

It would be interresting, you can open a new issue on my project so I can try to find a way to implement this on mine (is kinda the same, but basically community driven + made in go for better performances) https://github.com/LelouchFR/skill-icons

shreyas-a-s commented 5 months ago

It would be interresting, you can open a new issue on my project so I can try to find a way to implement this on mine (is kinda the same, but basically community driven + made in go for better performances) https://github.com/LelouchFR/skill-icons

Cool. I think that would be great to see it implemented there so that maybe a new method can be found. If so that will benefit everybody and even this project as well. I can open an issue in your repo. See ya there. 👋