W3C home > Mailing lists > Public > whatwg@whatwg.org > June 2015

Re: [whatwg] Icon mask and theme color

From: Edward O'Connor <eoconnor@apple.com>
Date: Thu, 18 Jun 2015 10:19:51 -0700
To: whatwg@whatwg.org
Message-ID: <m2y4jhx7bc.fsf@apple.com>

Kornel wrote:
>>>> Safari[…] uses `theme-color` for foreground color of favicons of
>>>> pinned tabs, but other browsers use `theme-color` for background
>>>> colors.

I replied:
>>> Well, <meta name=theme-color> is not specced as speficially a
>>> foreground or background color; it's a color that user agents may
>>> use in any number of ways to customize their UI when displaying a
>>> web page. Safari's use of theme-color for pinned tabs is consistent
>>> with its definition. [1]

Kornel raised the FT's use of theme-color:
>> Financial Times' theme color is "salmon pink" (#fff1e0), but FT's
>> logo must use black letters.

Maciej replied:
> I find this use case pretty compelling. There’s no reasonable set of
> processing steps that could get you salmon pink for use as a
> background, but black for use as a foreground. I think this is
> compelling evidence that it needs to be at least possible to specify a
> mask icon color relative to the theme color.

Yeah, I agree. I wish we had a time machine to rename theme-color to
theme-background-color! :)

> (A.2) Add an attribute to <link> specifically for use in specifying
> the color for that icon, e.g. <link rel=mask-icon href=whatever.svg
> color=lightred>.

I like this option. I suspect it's better than specifying the color in
the SVG file itself. Consider the top-level tabs of bbc.co.uk (News,
Sport, Weather, etc.) They each have a different dominant theme color
(red for news, yellow for sport, etc.) but you can easily imagine them
wanting to share the same mask icon.

Anne wrote:
> This seems reasonable to me too. Though perhaps color="" should share
> parsing with <input type=color>? More restrictive, but does not allow
> transparency either, which CSS/<canvas>-like parsing would allow for.

There are three options I can see for parsing the color:

* rules for parsing simple colour values (like <input type=color>)
* rules for parsing a legacy colour value (like <body bgcolor>)
* parsed as a CSS <color> value (like in the canvas API)

I generally don't like the idea of adding new features that use weird
legacy parsing rules, so I'm inclined to agree that we should use the
rules for parsing simple colour values.

On the other hand, <link rel=mask-icon color=darkslategray> seems like
it should Just Work™.

IIRC we don't currently have any cases in HTML where attribute values
get parsed as CSS <color>s do, so I'm reluctant to go that route here.

Received on Thursday, 18 June 2015 17:20:28 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:33 UTC