Html5-boilerplate: Add theme-color meta tag to index.html

[coliff]

I'm submitting a ...

• [ ] bug report
• [x] feature request
• [ ] other (Please do not submit support requests here (below))

Chrome for Android and Samsung Internet supports the <meta name="theme-color" content="#3c790a"> meta tag.
https://caniuse.com/#feat=meta-theme-color

We cover this briefly in our docs (https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/extend.md#theme-color) but I think the meta tag should now be included in the default index.html template. Chrome for Android has a huge browser marketshare (33%) and adding a theme-color is a useful addition for all websites and webapps.

[roblarsen]

I like the idea. We need to pick something benign for the default value.

[roblarsen]

or... Hot Pink?

[jonathantneal]

Hot Pink has been the tradition of H5BP. Wasn’t that the default text selection color once?

[coliff]

ha. I think many people may not think to change it though so I think a light gray might be best.

[roblarsen]

@jonathantneal It was. It was removed in 4.0 with 91 comments on the commit!

[roblarsen]

[jonathantneal]

Yes... that was also the tradition... to later remove it for exactly that reason... Mmm... memories...

Yea so probably not hot pink 😄

[coliff]

The amended web.manifest PR #2060 we have has theme_color as #fafafa - almost white. I suggest we go with that. Is that ok? whatever we choose the theme_color must match in both the web.manifest and the HTML meta tag.

[coliff]

This is now addressed in PR #2074

[Richienb]

As an addition to @coliff, #fafafa is Google's recommendation of background colour in order to convey a nice contrast against pure white cards that have shadows.

Take a look at the following example from the official Material Design website.
The background colour behind the cards is in fact, #fafafa.

[coliff]

Added in #2074.

[Richienb]

Finally!