Use theme-color to give mobile site headers color

The theme-color meta tag provides a way to suggest a color that browsers should use to customize the display of the page or user interface.

Use theme-color to give mobile site headers color

The theme-color meta tag provides a way to suggest a color that browsers should use to customize the display of the page or user interface.

Submitted
 by 
Josh Jacobs
 on 
9/28/19

Valid `Theme-Color`


meta-theme-color hint checks if a single theme-color meta tag is specified in the <head> with a valid value supported by all user agents.

Why is this important?

The theme-color meta tag provides a way to suggest a color that browsers should use to customize the display of the page or of the surrounding user interface. For example, browsers might use the color for the page’s title bar or use it as a color highlight in a tab bar or task switcher.

In the context of progressive web apps, for a more app-like feel, providing a theme color is essential.

Here is an example of browser UI when the theme-color meta tag is not specified and when it is:

Browser UI when the theme-color meta tag is not specified
Browser UI when the theme-color meta tag is specified

Note that:

  • While the specification defines that the theme color can be any valid CSS color:
  • Values such as hex with alpha are not supported everywhere theme-color is.
  • Browsers that supported rgba, hsla, or hex with alpha values will ignore the alpha value.
  • Always specify the theme color using the meta tag. Even though it can also be declared in the web app manifest file:
  • Browsers only acknowledge the value from the web app manifest file once the user has added the page to their home screen.
  • The theme-color meta tag overwrites the value specified in the web app manifest file so it allows for better individual page level customization.

To implement on Webflow:

Add the following code at the end of the <head> tag in the custom code:

<meta name="theme-color" content="#HEX">

Source: https://webhint.io/docs/user-guide/hints/hint-meta-theme-color/

Thank you for this submission.

Literally, this site doesn't work without helpful submissions like this, so thank you so much.

As the submissions roll in, I'll be categorizing, updating, and fact-checking each one. If you'd like to suggest a change to this task, please leave a comment and I'll do my best to get to it.

And lastly, if you submitted this task, seriously, thank you for you help.

the

COMPLETIST

All words / imagery / code / work moderated by Josh Jacobs

I'm having a blast f*cking around trying to get this stood up. If you're seeing this, you're the real MVP.
Have something you want to submit? Drop it here or shoot me an email.