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:

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:
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.

(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