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