Hello! I’m developing an add-on which uses a SVG toolbar icon. I’d like to know if there’s a way to make the toolbar icon color correspond to the browser theme’s color scheme, so that it fits in with the native icons. Thanks!
There is this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1377302
I could not get it to work in FF56 or 57 though.
Yes, this might not work for WebExtensions as far as I’ve tested—using fill="context-fill" on the icon SVG makes it black on dark theme, at least when using about:debugging to test it.
Yepp. Pretty sure that is the default color.
Maybe this helps:
https://bugzilla.mozilla.org/show_bug.cgi?id=1329242
I didn’t read the entire thing, but the title sounds good and it is marked as resolved in Firefox 56.
However, I presume that the whole purpose of allowing SVG icons to use fill="context-fill" is for them to fit the color of the other buttons in the toolbar, which in a Dark theme ain’t black, but light gray.
Also, I’m using Nightly, and it doesn’t seem to be fixed, at least from my latest restart.
There is the theme_icons key for the manifest.json, though I haven’t seen it working properly myself. https://dxr.mozilla.org/mozilla-central/source/browser/components/extensions/schemas/browser_action.json#25-31
Then I guess I’ll experiment with that to see if it’s functional. Thanks!
Thank you! It works fine!
Here is my manifest:
"browser_action": {
"browser_style": true,
"default_icon": "icons/icon.svg",
"theme_icons": [
{
"light": "icons/light-icon.svg",
"dark": "icons/icon.svg",
"size": 16
},
{
"light": "icons/light-icon.svg",
"dark": "icons/icon.svg",
"size": 32
}
],
...
}