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

Created on 4 Oct 2018  路  12Comments  路  Source: h5bp/html5-boilerplate

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.

enhancement

Most helpful comment

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.

Background colour example

All 12 comments

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

or... Hot Pink?

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

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

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

image

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

Yea so probably not hot pink 馃槃

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.

This is now addressed in PR #2074

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.

Background colour example

Added in #2074.

Finally!

Was this page helpful?
0 / 5 - 0 ratings