Make favicon change color (to something light) when browser or system is in dark mode

[akarelas]

This is what I see when the search engines appear, when I type something in my Firefox's search box (in the toolbar) when in dark mode (this is hard to see):

An icon can have different color when in dark mode, by doing the following:

1. make it SVG
2. inside this SVG, include a <style> element that sets the fill property of the path to a different color depending on color-scheme

Check this for example (it works!):

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
    <style>
        path { fill: #3385ff; }
        @media (prefers-color-scheme: dark) {
            path { fill: #6685ff; }
        }
    </style>
    <path d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"/>
</svg>

[Grinnz]

I think it would be easier just to give it a white background rather than transparent. But thank you for reporting the issue.

[ilmari]

I would suggest using the same camel icon that's is used in the navbar as the favicon. It should work well on both light and dark backgrounds.