Detect Theme Color Dark/Light

[Erin 'Folletto' Casali]

Hello,

I've an extension that writes the icon content programmatically. The color changes accordingly to the OS system color thanks to this line:

this.context.fillStyle = (window.matchMedia('(prefers-color-scheme: dark)').matches ? "#f2f3f4" : "#606368");

However, I realized that Chrome also reverses the icon color contrast depending on the theme color. This change however clearly doesn't influence the `prefer-color-scheme` setting), which just follows the OS setting. So a user can have a OS in light mode, and a dark theme, and the icon color will not work anymore.

Does anyone know a way to know if Chrome/Chromium has reversed the icon color in the toolbar? I did some research but I can't find any reference.

Regards,

E·

[Jackie Han]

Which icon are you talking about?

Extension icon on the toolbar by setIcon method, or the icon of a web page?

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/3a1b8cdd-1305-401b-bc76-e488d82ae972n%40chromium.org.

[Erin 'Folletto' Casali]

Hello Jackie,

To be clear I'm not asking on how to set the extension icon. That works, and I've already the code above that changes the color depending on the system-wide flag (light or dark) with `setIcon`.

I'm referring on how to detect the icon color and text color in the Chrome toolbar. When a light theme is loaded (default), the color of all the controls is dark-on-light. When a dark theme is loaded (custom theme, or user profile with a dark color) the color of all the controls is light-on-dark. While the default theme does this accordingly to `prefer-color-scheme`, a user can upload (or configure in the profile) a theme with a dark background, in which case Chrome reverses the colors for contrast regardless of the system-wide setting, so `prefer-color-scheme` can't be used in this situation to detect the color reversal.

I need a way to know when Chrome is reversing the color of the UI controls in the Chrome toolbar that doesn't use `prefer-color-scheme`.

Regards,

E·

[Jackie Han]

My understanding is that you want to know the real background color of the browser toolbar.

For example, a user's system is in light mode, but the user installed a dark theme from Chrome Web Store or adjusted the setting in chrome://settings/manageProfile .

Unfortunately, as far as I know, no api can get the real background color of the toolbar.

This is a pain for extension icon's design, no way to adapt users' color theme. For me, I choose a color that can adapt to both light and dark background colors as the main color of the extension icon.

[Erin 'Folletto' Casali]

Hello Jackie,

Yes. I don't need necessarily the real background... could be the background, could be a contrast flag, could even be a special color that Chrome provides that is always the color of the UI text...

Unfortunately I can't pick a single color because I'm writing text (the extension is Blipread, shows the number of minutes it takes to read the page), so I can't really design an icon that looks well on both.

But yeah, thanks for the cross check. I think the only solution remaining is then to provide manual customization of the color to the user. Which is a hassle, but at least it's a way out.

Best,

E·

[Deco]

This specific problem reminded me of Chrome's recent additional support for COLOR V1 fonts - this essentially allows for fonts to integrate different custom colour hex schemes without the hassle of having to manually adjust the font file itself to support them. I have no idea if it is possible to track specific colour changes using this, but it's a possible solution to this dilemma. I haven't read the documentation yet, however you are free to check for yourself: https://github.com/googlefonts/colr-gradients-spec 

Thanks,

Deco

 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/8c8126df-aedc-4b3d-b15c-d73d94337a26n%40chromium.org.

[Erin 'Folletto' Casali]

Hello Deco,

Thanks I'll have a look :)

Best,

E·

[Vladimir Yankovich]

I have the same problem and the same need.

Chrome added favicons to a new tab and successfully changes the color of its icon to any color theme. However, as a developer, I cannot do the same, because I do not know the background color of the Chrome interface.

Tell me, can someone help frame this as a problem/request?

[Jackie Han]

I added an issue at w3c/webextensions group.

Issue title: Extension Icon Design for Light/Dark/Custom Theme on Browser Toolbar.

Issue link: https://github.com/w3c/webextensions/issues/229

Anyone who is interested can supplement your needs or ideas.