[FEATURE REQUEST] Invisible icons in Dark Mode

[hgrafa]

I have searched through the issues and didn't find my problem.

• Confirm

Bug description

We often use icons to build more interesting custom READMEs. Many users use dark mode and some icons like the one in NEXTjs completely lose their contrast. It would be interesting to put a white version in the direct link.

Possible fixes or solutions

This link contains a negative color version.

Additional information

I would like to know if this issue was correct created or if it's better create in another issue form template.

[Panquesito7]

@Snailedlt, @amacado, maybe we should look into adding multiple color versions. There are various issues/PRs that are trying to do this.
Meanwhile, if we don't implement this, should we use dark or light mode?

[Snailedlt]

I agree, dark mode and light mode icons are a must in this day and age. We should definitely add support for it. I guess the names can just be updated with a -light or -dark suffix, though that would break backwards compatibility.

I think at this point we have enough new features that we could make a new major release though, so maybe now is the right time to start making those major changes?

[amacado]

I agree that there is a need of light/dark mode icons. But keeping a suffixed version of them would blow up the total size of this project. Remember our current naming conventions (name)-(original|plain|line)(-wordmark?) which already lead up to 6 versions per icon. Adding a light/dark prefix would lead up to 24 (name)-(original|plain|line)(-wordmark?)((-dark|-light)?) versions for each icon.

With the help of CSS you can easily modify the SVG icons on the fly to match the theme requirements. I know this is not a solution for markdown but also a suffix would not solve this since you'd have to decide which one to use since you can't decide this based on the selected theme (or is there a solution for that?).

[Snailedlt]

@amacado You can select based on the selected theme :) I've used this in my profile readme on the github icon:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/43886029/180790910-37fc43da-eb83-4db6-9079-469fe83be1d5.svg">
  <img alt="GitHub" title="GitHub" width="35px"  src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg">
</picture>

If we had endpoints for light and dark versions, I wouldn't have to upload my own light icon, so I could do this instead:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original-dark.svg">
  <img alt="GitHub" title="GitHub" width="35px"  src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original-light.svg">
</picture>

You can do the same with plain markdown by adding #gh-dark-mode-only or #gh-light-mode-only to the end of the img link.

![GitHub-Mark-Light](https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png#gh-dark-mode-only)![GitHub-Mark-Dark](https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png#gh-light-mode-only)

[Snailedlt]

@hgrafa This isn't really a bug, since it's working as intended. Could you rephrase the issue so it's a feature request instead? Something like [FEATURE REQUEST] Add darkmode and lightmode versions for each icon.

I like the idea of having versions with inverted colors of the icons too, but if we do it like that, how would we know which one is dark and which one is light? Maybe a bot that checks the color hex value or something, or maybe a more manual approach is better?

[BenSouchet]

Just linking this discussion I opened earlier this year, about the same kind of issue when brands have dark and light versions of there logo.

[lunatic-fox]

  I'm using some of Devicons icons into one of my projects and the icons pass through a function to have the contrast color that I need. But I've downloaded and created a little program in Node.js to clean some pieces of code and prepare it to receive a different color, then it build a .yml data file with all edited icons that can be used into API process.

Some examples:

  I'm using Vercel recently to create some serverless functions and I've started to write the base of a function that perhaps can solve part of this issue via API.

These are my current results:

  Some icons are not fully colored in blue, because they are not in just one path, are styled or something else. Therefore, they can be treated and replaced since a new version of Devicons is not released.

API Suggestion

Selecting dark and light themes

Default is the original color of the icon.

![](<baseURL>/api?theme=dark)
![](<baseURL>/api?theme=light)

Selecting size

Default size is 128×128px.

![](<baseURL>/api?size=50)

Example

Requesting javascript icon, with 50px of size with dark theme.

![](<baseURL>/api?icon=javascript&size=50&theme=dark)

The response will be a white javascript icon with 50px of height and width.

What the API does?

• Step 1 - The main function requests devicon.json to know what are the possible font versions of the icon.
• Step 2 - It will choose the version following this priority order: plain, plain-wordmark, original, original-wordmark, line, line-wordmark.
• Step 3 - It will try to fetch the icon via cdn.jsdelivr.net. If it's not found, it'll see if the icon has some alias, if so, it will try another fetch using base name as part of the request.

Issues on step 3 - There are some exceptions like handlebars and yarn icons that need some fixes into versions reference I think.

• Step 4 - With the request successfully made it will edit the icon using some regular expressions, allowing the icon to receive some color, width and height.
• Step 5 - The function finally returns the edited icon or an empty .svg in case of mistyping the name of icon, for instance.

Additional info

  This API project is not designed to edit multicolored icons, like the original versions of some icons. However, if the original icon don't have shades, for instance, it'll look like a plain icon at the end.

Conclusion

  If this suggestion is accepted every single help on development will be welcomed, because I don't work with programming and it's a valuable addition have someone with experience. If it's not accepted, that's ok too, because this little project makes me see some parts that need to be fixed and I can help with it as an user and contributor.

[Snailedlt]

Related to #977

[Snailedlt]

@lunatic-fox That website looks incredible!

I can see there's a lot of languages there which aren't on devicons though. Feel free to make PRs or Issues for the languages that are missing on devicons, and are within our scope (What Icons Do We Accept?), we want to add as many of those icons as possible :)

[lunatic-fox]

Thank you very much @Snailedlt!!! 🤩

---

By the way, I made the API, but I didn't deploy it, because I want to know if this suggestion is ok or not. 🤔

[Snailedlt]

@lunatic-fox
Sounds good to me :)
You don't really need our permission though, since devicons is open source, so you can do with it whatever you want :)

[lunatic-fox]

After a long time making the docs it's all done! 😅
Devicon API project 🚀

And here are some examples:

Next.js in dark theme	Next.js in light theme

[mudouasenha]

Great @lunatic-fox , thank you!

[lunatic-fox]

Thank you too @mudouasenha! 🤩
I'll be working now to make the color change automatically to the next version.

[Panquesito7]

I believe we should have this as an official resource.
We can link it on the Wiki and README for now.

Re-opening the issue for discussing this.

[Panquesito7]

New discussion: #1672