mohammadhi@ Thanks for the issue.

From the above description, this looks like a Feature Request to be allowed to provide different icons for light and dark browser UI, and Chrome will automatically choose the proper icon.
Marking this as Untriaged, adding the appropriate labels and reqsting Dev to look into the issue and help further.

Thanks..

> provide different icons for light and dark browser UI
Yes, for native browser UI. And also for custom themes, which means detecting if the custom theme is a dark or light one (from its colors?) and choosing the proper icon.

devlin@ are you the right person for this? If not, could you route?

I like this idea a lot.  We've thought about how we might be able to expose the current theme to extensions in order to allow them to use this information.  I don't think there's any real reason not to.

yyushkina@, I wonder if this ties in with some of the other theme work you're investigating?

Adding Mark to this who's PM'in the work on dark mode, Ramya for consideration around creating a way to detect whether a theme is dark (which would be useful beyond this request), and Peter in case he's thought of this.

Scattered thoughts:

* It's less useful to know "is the theme light/dark" than "what color is this icon atop".  So for example if we're talking about browser action icons, then the relevant colors are the toolbar color and the menu background color.  Those may be different from each other, and they may both be very different from the colors used in the rest of the theme.

* Really, knowing about colors or light/darkness is a means to the end of having enough contrast that the icon stands out.  The goal is not so much "light/dark-tuned icons" as "readably-high-contrast icons".

* Toolbars may have background images, complicating the question of what the background color is; but I'm prepared to set that aside and assume the theme toolbar color is the representative color in that case.

* This is basically the same problem webpage favicons face, since tabs can have any background color.  One common solution there is to provide images that will look good over a range of background colors.

Putting all those together:
* We should probably recommend authors explicitly test their extensions with various background colors, rather than assuming a light neutral background.
* We could perhaps allow extensions to provide multiple icons, which the browser could dynamically switch between based on contrast against the toolbar.  This would be easier for authors than firing events at the extension and forcing it to update icons every time.  To compute contrast against the toolbar, we could get the representative color for the icon (as the theme service does for various theme images today) or allow authors to specify the color to be used in the calculations for each icon.

mehmet@ points out that there's also an issue with extension popups in https://bugs.chromium.org/p/chromium/issues/detail?id=850098#c43

I think maybe the prefers-color-scheme media query (Issue 889087) would be the way to go here.

re 10, don't stop at icons please. If the API event will be exposed to extensions (at least) they could switch colors of their browserAction popup window. Currently it's highly disruptive to see white popups in an overall dark UI theme, especially if the entire OS uses a dark theme. Having a per-extension switch of light/dark theme is obviously counter-productive and very last-century UX-wise. If not an API event, maybe at least expose it via a predefined CSS variable accessible via var() or env() so the extension could analyze it BEFORE the first frame is painted and switch its inline styles accordingly.

I largely agree with pk. Iconography is important and the extension developers should be testing that it is visible and recognizable against a variety of backgrounds. If we invest anywhere, we might follow Apple and support template-style iconography -- monochromatic glyphs that use masking to define shape -- in order to universally theme/style them in a way that makes them always visible. Still, not the easiest mechanism to get right.

As per c#11, the media query should allow the content area to adapt as necessary.

re c#13, Please don't follow the Safari way. While it works well for abstract primitive items (like arrows, stars), sometimes it's barely possible do design a monochromatic icon, that will look well inverted, especially for 19x19px size (see my pain in attachment).

Another issue is that while mono icon could look well for 1 or 2 extensions installed, more extensions icons will become undistinguishable from each other.

Deleted: Screen Shot 2019-01-05 at 15.13.14.png 15.2 KB

	Screen Shot 2019-01-05 at 15.13.14.png 15.2 KB View Download