Icon in about:addons does not not match prefers-color-scheme

[Gitoffthelawn]

Short description

I noticed the v1.6.0 release notes state "Determine color of SVG icons for the platform color mode (dark or bright), based on the CSS prefers-color-scheme feature."

I use a dark theme, and so for years I've used 1 line of code in userContent.css to modify the colour of CSTTC's icon in about:addons (I make it green-blue (colour #0c4), which works well for my eyes).

Given the above referenced line in the v1.6.0 release notes, I thought I would let you know that this line of code is still needed for v1.6.0. It's no problem for me, but I thought I would let you know.

If you do choose to fix this issue, please don't use a bright white (colour #fff) icon for dark themes. That generates much too much contrast. #b4b4b4 works well if you go with white, although I prefer a little colour in my world. :)

Steps to reproduce

1. Start Firefox with clean profile.
2. Select a dark theme.
3. Go to about:config.
4. Set layout.css.prefers-color-scheme.content-override to 0.
5. Install CSTTC.
6. Go to about:addons.
7. Notice the CSTTC icon is dark on dark.

Expected result

Lighter icon for dark themes.

Actual result

Dark icon.

Environment

• Platform (OS): Linux
• Version of Firefox: 115ESR
• Version (or revision) of CSTTC: 1.6.0

[Gitoffthelawn]

Upon further inspection, this applies to all the CSTTC icons. I wrote code in userContent.css and userChrome.css long ago to make CSTTC play nice with dark themes. My workaround works fine for me and is simple. Within context menus, I find that simply applying filter: invert(0.7) to the appropriate elements looks nice.

If you do decide to make a change, please keep the colour of icons in dark themes no brighter than #b4b4b4, else the contrast is too great. Thanks!

[piroor]

I've realized that a PNG icon is actually used (it is from addons.mozilla.org website) so I've updated manifest with SVG icons for each size. Please try 1.6.1 and later after it is published.

[Gitoffthelawn]

v1.6.1 fixed the "dark on dark" issue for about:addons, although for my taste, the icon is too bright. Thus, I still use userContent.css to apply a CSS filter on that element to lower the intensity. What do you think about making it less bright?

v1.6.1 did not fix the "dark on dark" issue for the CSTTC context menuitems, so I am still using userChrome.css to work around that minor issue.

[piroor]

I couldn't reproduce the mismatched color icon problem on the context menu... it looks to appear with bright color icon. Here is a screenshot on Ubuntu 22.04 with the dark theme (Wayland, GNOME). It may be a distribution specific problem.

What do you think about making it less bright?

Thanks, I missed that applied icon color is different on the dark mode. I've fixed this also on 1.6.2.