Browser action icon is hard to see when there is a dark background

[jobara]

Describe the bug

The browser action icon, which is used to open the UIO+ panel, is currently a dark blue gear. This displays okay on the default Chrome theme, but is hard to see when run in incognito mode (black background) or other custom themes.

See: https://developer.chrome.com/extensions/browserAction for tips.

Originally filed as GPII-2841

To reproduce

Steps to reproduce the behavior:

1. Install and enable UIO+
   Notice that the browser action icon, blue gears, are small and may be hard to see.

Expected behavior

Browser action icon should be easily perceived on all backgrounds.

[jobara]

One option would be to use the UIO+ icon as the browser action as well. It displays the graphic on a white background and will likely appear better with various themes applied to the browser.

[jobara]

For incognito mode, could try to detect if in incognito mode and update the browser action if so (see: https://stackoverflow.com/questions/36931484/light-dark-browseraction-icons-in-chrome-51 ).

For dark mode could try to use the window.matchMedia with "(prefers-color-scheme: dark)" to check if in dark mode.
See: https://developer.chrome.com/extensions/browserAction#method-setIcon for how to programatically set the browser action icon

[jobara]

Suggestion from the morphic team was to put it on a white background, they had to do something similar for the morphic icon to show up on a computer's desktop.

[jobara]

Design Crit notes