search

WICG / document-picture-in-picture

https://wicg.github.io/document-picture-in-picture/
Other
58 stars 9 forks source link

Color mode #122

Closed liberato-at-chromium closed 3 months ago

liberato-at-chromium commented 5 months ago

Here's an idea for how we could allow the site to request light / dark / user's choice colors. Note that it would change chrome's current default of "dark" to "whatever the user's preference is set to", but currently there are no guarantees made about the behavior in the spec.

beaufortfrancois commented 5 months ago

I believe web developers will want more control over the PiP window frame color. How about re-using the existing and convenient theme-color instead?

The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <color>.

<meta name="theme-color" content="#4285f4" />

You can provide a media type or query inside the media attribute; the color will then only be set if the media condition is true. 

<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

It would also work great with the CSS display-mode picture-in-picture.

For info, PWA windows already use this:

image

liberato-at-chromium commented 5 months ago

PWAs are a bit more trusted than pip windows. If we were initially going to implement this with a rule like "lighter colors get default light-mode border, while darker colors get the default dark-mode border. As in, the site could pick light vs dark colors, but only indirectly. It couldn't pick teal, for example.

A quick read of the spec makes me believe that the exact effect of theme-color is pretty loose, so seems okay for now and lets us defer the question of allowing random-colored pip windows.

I'll give it some thought.

guidokessels commented 4 months ago

It'd be great to be able to define a colour for the window frame to make its styling match our page. At Spotify we've been using a gradient to make it feel more integrated. The theme_color approach looks pretty useful to me 👍

beaufortfrancois commented 4 months ago

Thanks for chiming in @guidokessels!

beaufortfrancois commented 3 months ago

What's the current status on this?

guidokessels commented 2 months ago

@liberato-at-chromium I see this proposal has been closed. Has any decision been made or has this idea been cancelled?