Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add theme-color meta tag to index.html #2073

Closed
1 of 3 tasks
coliff opened this issue Oct 4, 2018 · 12 comments
Closed
1 of 3 tasks

Add theme-color meta tag to index.html #2073

coliff opened this issue Oct 4, 2018 · 12 comments
Assignees
Milestone

Comments

@coliff
Copy link
Member

coliff commented Oct 4, 2018

I'm submitting a ...

  • bug report
  • 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 coliff changed the title Add meta name="theme-color" to index.html Add theme-color meta tag to index.html Oct 4, 2018
@roblarsen
Copy link
Member

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

@roblarsen
Copy link
Member

or... Hot Pink?

@jonathantneal
Copy link
Member

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

@coliff
Copy link
Member Author

coliff commented Oct 4, 2018

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

@roblarsen roblarsen added this to the 7.0 milestone Oct 4, 2018
@coliff coliff self-assigned this Oct 4, 2018
@roblarsen
Copy link
Member

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

@roblarsen
Copy link
Member

image

@jonathantneal
Copy link
Member

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

Yea so probably not hot pink 😄

@coliff
Copy link
Member Author

coliff commented Oct 4, 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
Copy link
Member Author

coliff commented Oct 8, 2018

This is now addressed in PR #2074

@Richienb
Copy link
Contributor

Richienb commented Oct 9, 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.

Background colour example

@coliff
Copy link
Member Author

coliff commented Feb 8, 2019

Added in #2074.

@coliff coliff closed this as completed Feb 8, 2019
@Richienb
Copy link
Contributor

Richienb commented Feb 8, 2019

Finally!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants