Add-on SVG toolbar icon: How to fit the color scheme of the current theme


(MarsCat) #1

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!


(Niklas Gollenstede) #2

There is this:

https://bugzilla.mozilla.org/show_bug.cgi?id=1377302

I could not get it to work in FF56 or 57 though.


(MarsCat) #3

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.


(Niklas Gollenstede) #4

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.


(MarsCat) #5

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.


(Martin Giger) #6

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


(MarsCat) #7

Then I guess I’ll experiment with that to see if it’s functional. Thanks!


(Mikhail Donskoy) #8

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
    }
  ],
  ...
}