Html5-boilerplate: Add theme-color meta tag to index.html
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.
coliff
All 12 comments
I like the idea. We need to pick something benign for the default value.
roblarsen
on 4 Oct 2018
or... Hot Pink?
roblarsen
on 4 Oct 2018
Hot Pink has been the tradition of H5BP. Wasn’t that the default text selection color once?
jonathantneal
on 4 Oct 2018
ha. I think many people may not think to change it though so I think a light gray might be best.
coliff
on 4 Oct 2018
@jonathantneal It was. It was removed in 4.0 with 91 comments on the commit!
roblarsen
on 4 Oct 2018
roblarsen
on 4 Oct 2018
Yes... that was also the tradition... to later remove it for exactly that reason... Mmm... memories...
Yea so probably not hot pink 😄
jonathantneal
on 4 Oct 2018
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
on 4 Oct 2018
This is now addressed in PR #2074
coliff
on 8 Oct 2018
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.
Richienb
on 9 Oct 2018
Added in #2074.
coliff
on 8 Feb 2019
Finally!
Richienb
on 8 Feb 2019
Related issues
roblarsen
·
8Comments
coliff
·
10Comments
roblarsen
·
9Comments
gaurav21r
·
21Comments
tomasz1986
·
5Comments
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.