Change SVG color based on user color scheme

[Bellisario]

I'm not sure this can be made but would be great if the user will be able to see the Profilator through its color scheme and not just black.

Limitations

This actually will NOT change based by GitHub color set, because there isn't a way to detect how it's set, instead, it will be made by looking at user preferred color scheme.

How will be developed

• The color of the border and the background will be changed using CSS and looking for preferred color scheme. (I don't know if this can be actually made because of SVG. If can't be made, the fallback will be to change the SVG background color to transparent to respect user GitHub theme, but in this way the border will be kept in a black style)
• If a "forceScheme" URL parameter is passed, will be applied the theme (dark or light) manually choosen
• All the URL parameter logic will be passed into the SVG through the use of Replacer.

[cicirello]

You should probably be able to use a CSS media query inside the SVG to accomplish this. See this link to a Stackoverflow answer that shows a media query that changes style based on light vs dark mode: https://stackoverflow.com/a/67190894/16644458.

I have not tried this, so cannot confirm directly that it works. There's a bit of discussion on that Stackoverflow answer on whether it will work if the SVG is used as an image in an <img> tag, but the consensus appears to be that it works there.

So the general pattern is:

<svg xmlns="http://www.w3.org/2000/svg">
   <style>
       <!-- style elements for light mode goes here -->
        @media (prefers-color-scheme: dark) {
            <!-- style elements for dark mode goes here -->
        }
    </style>
    <!-- Rest of SVG goes here -->
</svg>

[Bellisario]

Thanks for your suggestion... I'll probably try this as implementation.

---

Anyway, as fallback (if GitHub seems not to accept CSS dark mode detection), could probably be used this recent adding: https://github.blog/changelog/2022-08-15-specify-theme-context-for-images-in-markdown-ga/ (but I don't think this is a good idea, since it will be GitHub only available and all Markdown should become HTML)

[Brainhub24]

If you need any help, i´ll support you. It´s a great project!