[FEATURE REQUEST] Ability to set theme=auto

[shreyas-a-s]

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]

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

[Jeesson]

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]

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]

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]

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]

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]

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. 👋