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

Add-ons Development
#1

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:

  1. It should work in all sizes/HiDPI-compatible, i.e. I want to use an SVG.
  2. The style guide says I should use colors with transparency. How can I do that in my extension?
  3. 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.
    I know I can set it with browserAction.setIcon, but for this I need two icons now and need to detect the theme/color of the theme and whether it is rather light or dark.
    Is not there a better/recommend way?

As for the last thing I tried to set the SVG to context-fill, hoping it would automatically use the correct color, but it did not do so.

Use theme colors for SVG favicons
Icon sizes with SVG
#2

So I try to get the current theme with theme.getCurrent()](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/theme/getCurrent), but it just returns me an empty object. Could it be that this does not run for built-in themes?

#3

If no extension-supplied theme has been applied to the given window, it will be fulfilled with an empty object.

For the browserAction you can use theme_icons: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/browser_action#Syntax

And this extension let’s the user change the icon color: https://addons.mozilla.org/en-US/firefox/addon/experimental-simple-tab-groups/

1 Like
#4

Oh, thanks! How could I miss that?

Indeed that’s exactly what I am looking for.

As for the transparency question,. I think transparent SVGs, as I currently use, work. :smiley:

#5

@NilkasG

I am trying to use that thing, but it does not work. It seems my JSON is always rejected.

This is what I made up from the MDN description:

"browser_action": {
    "browser_style": true,
    "default_icon": "icons/icon-small-dark.svg",
    "default_title": "__MSG_browserActionButtonTitle__",
    "default_popup": "[…]",
    "theme_icons": [
      {
        "dark": "icons/icon-small-dark.svg",
        "light": "icons/icon-small-light.svg",
        "size": "32"
      }
    ]
  },

It’s already stupid to have to specify a size for the SVG, but well… Firefox should fall back to that file for any size then.
However as MDN says “You need to supply an ThemeIcons in size 16 and one in size 32 (for retina display).” (which, BTW, kinda is contrary to the statement that the key is “an array containing at least one ThemeIcons object”), so I also tried this (without any luck) for “theme_icons”:

    "theme_icons": [
      {
        "dark": "icons/icon-small-dark.svg",
        "light": "icons/icon-small-light.svg",
        "size": "16"
      },
      {
        "dark": "icons/icon-small-dark.svg",
        "light": "icons/icon-small-light.svg",
        "size": "32"
      }
    ]
#6

Ah, BTW, I found an example extension, which uses this feature:

Actually, my issue was that I included the size key as a string instead of a number.

Dark theme_icons are ignored in Manifest v3 extension
#7

Yeah, the first part from MDN is simply not true. I always specify my SVG icons as

"icons": {
	"1": "/icon.svg"
},

and never had a problem with is (except that chrome can’t handle SVGs at all).

Icon sizes with SVG
#8

For default_icons you can just omit the object for SVGs. theme_icons sadly doesn’t properly support just about anything currently (and was looked at as a stop-gap, which is also why it’s only supported on browser_actions).

1 Like
#9

Actually that part is not true:

You need to supply an ThemeIcons in size 16 and one in size 32 (for retina display).

As even the example extension linked before shows, if you use an SVG, you can use one icon. You just have to specify any size. :wink:

#10

However, now there are sad news as I just noticed: The theme_icons is not available for the page_action.

So this is strange: You can correctly apply the browser action icon (/color), but not the page icon?
IMHO that makes no sense, as your own guide also explains that you should use different colors there, too, for the icon depending on the theme. So when add-ons cannot do this, this is bad.

How to detect the dark theme in a WebExtension?
#11

Here is a follow-up on that issue:

#12

BTW, I saw a feature request on Bugzilla about that, actually:

There are also some interested other, related issues:

  1. The same thing is not available for sidebar_action:
  1. It could be useful if add-on’s could dynamically adjust it, so status messages or so can be conveyed: