Menu
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?
435
To change your settings within the browser, tap the three-dot menu in the bottom-right corner, select Settings, then Customize, and choose between Light, Dark, or Follow device theme.
You can do that by clicking “Themes” on the left side of the screen. You will see the “Dark” theme. Click on the “Enable” button to immediately activate the dark mode for the browser. Note: If you have Firefox Sync turned on, dark mode will be activated on all your Firefox installs.
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:
68
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
