Use theme colors for SVG favicons

[rugkx (rugk)]

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:

How to correctly design/color icon to be visible across themes?

I do want to create an icon (for a browser action) and adhere to Firefox Photon’s style guide. Here is what I want to do: It should work in all sizes/HiDPI-compatible, i.e. I want to use an SVG. The style guide says I should use colors with transparency. How can I do that in my extension? The design is a simple one (i.e. no borders, which would just be distracting). The problem is that I either have to make it black or white. In any case is not visible in one of the (Firefox default) themes. …

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…)

[freaktechnik (Martin Giger)]

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.

[rugkx (rugk)]

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

Does anyone know how Firefox Color does it?

[freaktechnik (Martin Giger)]

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.

[rugkx (rugk)]

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?

[freaktechnik (Martin Giger)]

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.

[rugkx (rugk)]

Okay, found this:

1394579 - Consider adding code for checking mozilla signing key for context-fill...

[myfreeweb]

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

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.