Add an icon "purpose" for displaying on the theme color

[mgiuca]

Problem: We sometimes want to display the app icon on top of the app's theme color (e.g., for a window icon in a title bar that is themed to the theme color). Many brands will want to use a theme color that exactly matches the dominant color of their icon, which will look bad when applied on top of the theme color.

For example, Facebook's icon is just a white 'f' in a blue square. If they set their theme_color to the same blue, then when the user agent places the icon on top of the themed title bar, it will just look like a floating white 'f' in a sea of blue. Facebook works around this problem in their Android app by providing a special inverted icon with a blue 'f' in a white square. There is no way to specify a special purpose icon like that in a web manifest.

I propose simply adding a new purpose called "on_theme_color" (bikeshed away) that lets you specify a separate icon asset specifically for painting on top of the theme color.

[owencm]

If we're doing that we should probably add an on_background_color too, since that would be useful for splashscreens etc.

[kenchris]

Sounds like a good idea.

Name suggestions (bikeshed away)

on_theme_color
ontop_theme_color
for_theme_color
superimposed_on_theme_color
theme_color_superimposed

[marcoscaceres]

Let’s please avoid “on_”, as it sounds like an event handler.

[delapuente]

I think this is kind of artificial and strongly tied to design vocabulary. It would be more convenient to provide a semantic name like title_bar or themed_title_bar. Nevertheless, perhaps it is worth considering a new manifest section theming (or a separate file) to gather everything related to browser customisation.

[mgiuca]

@delapuente I disagree; the whole reason for this is to avoid the app icon's foreground colour from clashing with the theme colour. So we want a field whose semantics is "use this icon whenever you would place the app icon on top of the theme colour".

The "title bar" is a red herring; it's an operating system specific concept that we shouldn't directly give developers access to. If a user agent wants to make a notification UX with the theme colour and icon, they would also use this theme-color-contrasting icon. If a user agent makes a title bar without the theme colour, they should not use the theme-colour-contrasting icon.

The semantics of a web API should specify the things the developer needs to care about (like what colours will clash), and not the things the developer doesn't need to control and should be up to the user agent (like which exact contexts it appears in).

[marcoscaceres]

Although I'm supportive of the use case described above, I wonder if we should incubate this feature (i.e., put it in a "google_*" namespace) until other UAs catch up to what we currently have in the spec?

I'm concerned about extending the current spec until we see more implementations and interop.

I know on the Moz side, we are starting to ship a bunch of support in Fennec for various manifest members (and display modes)- so it might be good to literally take stock of where we are at by creating some web platform tests. I'd also like to see what's landed in Edge (if anything).

[mgiuca]

I'm happy to punt on this for now, and experiment.

On Chrome, we're in a weird place with experimenting in the manifest. We've made a concerted effort to move away from prefixes in recent years (in fact I think "no more prefixes" was the mantra when we forked Blink). So we've been doing origin trials instead for APIs. That hasn't yet been tried on a manifest property and it would be a pretty awkward fit IMHO. So we'll have to figure out what our policy is for experimenting in the manifest going forward. (We've got a few things we'd like to experiment with, like share_target.)

[marcoscaceres]

Ah yeah, something like an origin trial would be much better.

[delapuente]

@delapuente I disagree; the whole reason for this is to avoid the app icon's foreground colour from clashing with the theme colour.

You're right. Another argument for pushing a theming key forward with all the specifics of browser customisation.