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
Always set theme color to background color ✅ #19391
Merged
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
37bc45f
Added theme-color based on accent color for ampstory
bramanudom 99fe621
Added theme-color based on accent color for ampstory
bramanudom 4290304
Merge branch 'master' into theme_color
bramanudom dfc75da
Updated JSDoc for method
bramanudom 42b6ba1
fixed lint errors and test errors
bramanudom 57158a3
fixed suggestions from code review
bramanudom 9effbcd
use computed style helper instead of getComputedStyle
bramanudom 8a13ee5
fixed tests, implemented code review suggestions
bramanudom File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -180,6 +180,11 @@ const TAG = 'amp-story'; | |
const HIDE_ON_BOOKEND_SELECTOR = | ||
'amp-story-page, .i-amphtml-story-system-layer'; | ||
|
||
/** | ||
* The default light gray for chrome supported theme color. | ||
* @const {string} | ||
*/ | ||
const DEFAULT_THEME_COLOR = '#F1F3F4'; | ||
|
||
/** | ||
* @implements {./media-pool.MediaPoolRoot} | ||
|
@@ -348,6 +353,7 @@ export class AmpStory extends AMP.BaseElement { | |
this.initializeListeners_(); | ||
this.initializeListenersForDev_(); | ||
|
||
this.setThemeColor_(); | ||
this.storeService_.dispatch(Action.TOGGLE_UI, this.getUIType_()); | ||
|
||
this.navigationState_.observe(stateChangeEvent => { | ||
|
@@ -418,6 +424,25 @@ export class AmpStory extends AMP.BaseElement { | |
}); | ||
} | ||
|
||
/** | ||
* @private | ||
*/ | ||
setThemeColor_() { | ||
// Don't override the publisher's tag. | ||
if (this.win.document.querySelector('meta[name=theme-color]')) { | ||
return; | ||
} | ||
// The theme color should be copied from the story's primary accent color | ||
// if possible, with the fall back being default light gray. | ||
const meta = this.win.document.createElement('meta'); | ||
const ampStoryEl = this.win.document.getElementsByTagName('amp-story')[0]; | ||
const styles = computedStyle(this.win, ampStoryEl); | ||
meta.name = 'theme-color'; | ||
meta.content = styles.getPropertyValue('--primary-color') || | ||
DEFAULT_THEME_COLOR; | ||
this.win.document.getElementsByTagName('head')[0].appendChild(meta); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
} | ||
|
||
/** | ||
* @private | ||
*/ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is very unlikely, but publishers may provide a
<meta name="theme-color" ... >
when writing their story HTML. Should we try to check if there's one, so we don't override it?We could check this by doing something like
What do you think about this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this makes a lot of sense! Will add in a check.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not that unlikely. E.g. the PWA audit in Lighthouse recommends it.