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

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: browser_action - Mozilla | MDN And this extension let’s the user change the icon color: https://addons.mozilla.org/en-US/firefox/addon/ex…

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?

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:

@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_…

Ah, BTW, I found an example extension, which uses this feature: mdn/webextensions-examples/blob/93711a6a483beceb352668294a58b05c238d6de4/beastify/manifest.json#L18-L22 "theme_icons": [{ "light": "icons/beasts-32-light.png", "dark": "icons/beasts-32.png", "size": 32 }], …

[image] rugkx: 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”) Yeah, the first part from MDN is simply not true. I a…

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

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:

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

Here is a follow-up on that issue: [image] Use theme colors for SVG favicons Development Playing around with Firefox color I’ve noticed a problem for add-on favicons. Using one of the preset themes here: [grafik] So the QR code icon/favicon is mine, and it is actually d…

BTW, I saw a feature request on Bugzilla about that, actually: 1409107 - Add theme_icon to page_action NEW (nobody) in WebExtensions - Frontend. Last updated 2019-04-24. There are also some interested other, related issues: The same thing is not available for…

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

Add-ons Development

rugkx (rugk) June 5, 2018, 2:43pm 11

Here is a follow-up on that issue:

Topic		Replies	Views
Use theme colors for SVG favicons Development	7	2057	September 21, 2018
Add-on SVG toolbar icon: How to fit the color scheme of the current theme Development	7	2267	January 26, 2018
Icon sizes with SVG Development	4	876	January 8, 2023
Icon colour/theme compatibility Development	1	712	June 13, 2017
Firefox Default Themes & Theme Values Development	2	64	December 24, 2025

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

Related topics