Add support for theme-color
#278
Conversation
This is used in Chrome for Android, see: https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android See alphagov#277
|
Sweet thanks @willp-bl 👍 Can you show some screenshots of it in action? |
|
Are we happy using a hard coded version of a colour from our palette? Looking at the template only it feels like a magic value. I think we'd want to include a comment at least, which shows where the value comes from, or ideally pull it in from the SCSS variable as part of the build process. I don't want to slow down this PR too much, but we should consider how we'd keep this value in sync. |
|
I don't have access to BrowserStack, could someone lend a hand with the screenshots? The hard coded colour is used a couple of lines above without a comment - https://github.com/alphagov/govuk_template/pull/278/files#diff-fe08901690b6fdc6f34614aaae900216R20 Happy to add a comment to explain to this PR but I don't know where it is from... |
|
Should have clicked that link, will add a comment |
|
@willp-bl Thanks! That feels much better. Could you use |
willp-bl
force-pushed
the
add_theme_colour
branch
from
04d5071 to
0fa9924
Compare
| <link rel="mask-icon" href="<%= asset_path 'gov.uk_logotype_crown.svg' %>" color="#0b0c0c"> | ||
| <link rel="apple-touch-icon-precomposed" sizes="152x152" href="<%= asset_path "apple-touch-icon-152x152.png" %>"> | ||
| <link rel="apple-touch-icon-precomposed" sizes="120x120" href="<%= asset_path "apple-touch-icon-120x120.png" %>"> | ||
| <link rel="apple-touch-icon-precomposed" sizes="76x76" href="<%= asset_path "apple-touch-icon-76x76.png" %>"> | ||
| <link rel="apple-touch-icon-precomposed" href="<%= asset_path "apple-touch-icon-60x60.png" %>"> | ||
|
|
||
| <%# the colour used for mask-icon is the standard palette $black from |
There was a problem hiding this comment.
mask-icon should be theme-color here
There was a problem hiding this comment.
Thanks, just pushed a fix for that :)
willp-bl
force-pushed
the
add_theme_colour
branch
from
0fa9924 to
3aa84c6
Compare
|
@willp-bl Thanks for changes! This is looking good to me. I'm happy to merge unless anyone has objections? |
|
I'm just going to check this out on an android device but after that 👍 |
|
Before:
After:
Looks even better without the cookie bar! Thanks Will 💯 |
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
# 0.20.0 - Fix EJS template - PR #270 - alphagov/govuk_template#270 - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header - PR #278 - alphagov/govuk_template#278 - Add `text-decoration-skip: ink` to all links on GOV.UK - PR #281 - alphagov/govuk_template#281 - Improve contrast of links when focused - PR #272 - alphagov/govuk_template#272 - Make header text colour black when focused - PR #274 - alphagov/govuk_template#274 # 0.19.2 - Increase skiplink colour contrast - PR #263 - alphagov/govuk_template#263 - Fix Scala compile issues for Play template - PR #261 - alphagov/govuk_template#261 # 0.19.1 - Have focus outline appear outside of element rather than covering it in Safari and Chrome - PR #259 - alphagov/govuk_template#259
This is used in Chrome for Android, see:
https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
See #277