Use theme colors for SVG favicons

Playing around with Firefox color I’ve noticed a problem for add-on favicons. Using one of the preset themes here:


So the QR code icon/favicon is mine, and it is actually designed by following the Photon guide and using the colors there – one for the dark theme and one for a light version.
However, as you see, it of course does not adapt the colors to the theme changes – as they are hardcoded in the SVG icon. This looks quite bad…

So I was already advised to use this trick with theme_icons for dark and light versions of the icon, but this does not seem to be enough:

So is there a way to use the color for the theme icons there? BTW in some way, the add-on Firefox Color itself can do so? Maybe with the “context-fill” the Photon icon viewer always suggests? (But I think IO tried that already, and it did not work…)

There are two things you can do:
Generate the SVG you set as icon based on the info you get from the theme API with getCurrent() or offer users a setting to adjust the color of the icon.

Note that the theme API will not help you with lightweight or the built in themes, so you still need to use the theme_icons for those.

Hmm, that sounds cumbersome (and requires additional permissions), …

Does anyone know how Firefox Color does it?

Firefox Color sets the color using the theme API. And it’s a mozilla signed extension so it can use a temporary workaround that mozilla signed extensions can use in SVGs.

So… we need that thing for usual extensions, too. Especially as you always advise on MDN to follow Firefox’ Photon guide.

IMHO it would be far enough, if we could just use “context-fill” as a “color” in the SVG and Firefox would use the correct color. This would also be no permission/security problem and “quite easy”.

Should I open a new Bugzilla bug for that?

context-fill is not allowed for normal extensions because mozilla does not want to commit to supporting it long-term. You can find the accompanying discussion on bugzilla.

Okay, found this:

mozilla does not want to commit to supporting it long-term

:frowning: :frowning: :frowning:

Even if some different API is planned, this is a bad reason because allowing us to use context-fill would NEVER break anything! It’s just a color in SVG, if you later decide to remove context-fill, the colors would just fall back to black.

Please unlock it for all extensions.