Comments (7)
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!
from skill-icons.
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.
from skill-icons.
I am not fully sure, but I think it is possible using prefers-color-scheme
property of css.
from skill-icons.
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?
from skill-icons.
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!
from skill-icons.
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
from skill-icons.
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. 👋
from skill-icons.
Related Issues (20)
- [NEW ICON] Xcode
- [NEW ICON] Socket io
- [NEW ICON] HashiCorp Nomad
- [NEW ICON] HashiCorp Vault
- [NEW ICON] HashiCorp Consul
- [NEW ICON] Polars
- [NEW ICON] Pulumi
- [NEW ICON] InfluxDB
- [NEW ICON] Litmus Automation
- [NEW ICON] PTC Kepware
- [NEW ICON] Ada Programming Language
- [NEW ICON] Geode
- [Shopify] Icon for Shopify Website Designers
- [NEW ICON] Load Testing
- [FEATURE REQUEST] Add title to icons HOT 1
- [NEW ICON] Babylon.js
- [NEW ICON] Telegram
- [NEW ICON] NetBeans
- [BUG REPORT] PICTURE&SOURCE tag HOT 2
- [NEW ICON] Fedora Linux
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skill-icons.