firefox pick page action icon for dark / light themes

Question

I'm writing a web extension works on firefox. I want my icon works similar to the behavior of Firefox built in "Take a screenshot". The screenshot icon appeared in different colors when it shown in light theme / dark theme / in the menu.

I just added a page_action in manifest, and set an icon for it. The black icon looks ok on light theme, but become hard to use on dark theme. I want show light version of icon if browser is in dark theme (And also keep the icon in the menu black).

I had searched something about this, and find browser_action support theme_icons but page_action not.

What is the best practices to set different icons for different use case of page action icon?

What is the best prestic to config different icon color for different theme?

Answer 1

After more google search, I found that this is implemented by screenshot add-on by adding fill="context-fill" fill-opacity="context-fill-opacity" on <svg> tag, and using svg for icon.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
  <path d="m0 0 H 16 V 16 H 0 Z"/>
</svg>

But unfortunately, this feature only enabled by default on mozilla-signed extensions. So this won't work on user defined extension.

Checkout bugzilla for more detail:

• Bug 1377302 - Support fill="context-fill" for mozilla-signed WebExtension icons

Answer 2

According to Bug 1377302, context-fill doesn't work because svg.context-properties.content.enabled is not enabled by default. The same pages says it was fixed in Firefox 55, but I'm using 60 and it is still not fixed.

So, right now, I would still use context-fill hoping that, in the near future, users will see the icon with the same color as the rest of the icons.