[Feature Request] - Make theme selection automatic in GitHub Markdown

[lunatic-fox]

Original issue

• Confirm

API parameter

theme

Problem to be solved

theme parameter only provides a standard color to the icon: #ffffff (dark theme) or #000000 (light theme). But it does not automatically select which theme should be used depending on GitHub Markdown theme.

Possible solution

Solution #​1 - currently implemented

 I recently created a interface page to make easier to use GitHub Markdown logic wrapping the themed icons. The generated code will be like the example below.

Example using html5 icon

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://deviconapi.vercel.app/?html5&theme=dark&size=128">
  <img alt="html5" title="html5" src="https://deviconapi.vercel.app/?html5&theme=light&size=128">
</picture>

Solution #​2 - work with adjustments

Suggested by: @Snailedlt

 We can use #gh-dark-mode-only and #gh-light-mode-only suffixes, but, as far as I searched, they only work to actual images. Which means the icons must be on an endpoint.

Example using javascript icon

![](./icons/javascript.svg#gh-dark-mode-only)
![](./icons/javascript.svg#gh-light-mode-only)

 As it does not work with API query, it's possible to create those endpoints by adding a new "generator program" (@develop/generator/generators) to build them.
With this solution they will work like ./icons endpoints of Devicon repository.

Solution #​3 - does not work properly

 The best solution would be to use the API to return a .svg with some logic to automatically choose the correct theme. That way we could make just one request.

Example using css3 icon

![](https://deviconapi.vercel.app/?css3&auto)

 This was tested and does not work with GitHub theme, only with browser theme.

Additional information

I'm searching some ways to implement the solution #​3 or something close to it. If you have any ideas, it would be great to read them here.

This issue closes NONE

[lunatic-fox]

Solution #​4 - working

Source: GitHub Readme Stats - Documentation

 It works the same way as implemented in Solution #​1, but it's a bit easier to read.

[![csharp-dark](https://deviconapi.vercel.app/?csharp&theme=dark)](https://github.com/lunatic-fox/deviconapi/issues/2/github-readme-stats#gh-dark-mode-only)
[![csharp-light](https://deviconapi.vercel.app/?csharp&theme=light)](https://github.com/lunatic-fox/deviconapi/issues/2/github-readme-stats#gh-light-mode-only)

Result

 The only issue with this solution is that you have to reference the README.md file that you want to place the icon.

[lunatic-fox]

Solution #​2 - @add_2nd_solution working only in README

Example using dotnet icon

![](https://github.com/lunatic-fox/deviconapi/blob/add_2nd_solution/icons/dotnet/plain-dark.svg#gh-dark-mode-only)
![](https://github.com/lunatic-fox/deviconapi/blob/add_2nd_solution/icons/dotnet/plain-light.svg#gh-light-mode-only)

Result - empty

Tests

• ❌ API
• ❌ jsDelivr
• ✔ GitHub regular link - with exception

[Snailedlt]

Nice!
Now for github markdown, the only thing missing is being able to resize the icons too :) Once that's in place I can completely replace the html with markdown and your API 🚀

[lunatic-fox]

Nice! Now for github markdown, the only thing missing is being able to resize the icons too :) Once that's in place I can completely replace the html with markdown and your API 🚀

Review

• Solution #​1 Current method

  • ✔ API features
  • ✔ Doesn't need to point the README file
  • ✔ Has an User Interface in order to make it easier to be implemented by the user
  • ⚠ Uses <picture>, <source> and <img>

• Solution #​2

  • ❌ API features
  • ✔ Doesn't need to point the README file
  • ⚠ Resizable only with <img> since it is a static file

• Solution #​3

  • ✔ API features
  • ✔ Doesn't need to point the README file
  • ⚠ Works only with browser theme, not GitHub

• Solution #​4

  • ✔ API features
  • ⚠ Needs to point the README file

 I would like pure Markdown support too, but I think that's not possible now in GitHub Markdown.