theme-color meta tag vs manifest theme_color

Web standards allow for setting the theme color of your site in 2 different ways. Which one should you use? I say use both.

Sun Jun 25 2023

pwa
web
design

1 min read

theme-color meta tag

You can set your site's theme color with the theme-color meta tag in the <head> of your site:

<meta name="theme-color" content="#4285f4" />

Browsers will use this color for certain browser UI elements (like the address bar) when the user visits your site.

If your theme color causes contrast issues it might not be used by some browsers.

theme_color in web app manifest

You can also set a theme_color in your site's web app manifest:

{
  "name": "My Site",
  "theme_color": "#4285f4",
  "background_color": "#fff"
}

The OS will use this color for certain UI elements when the user installs your site as a PWA. For example, this will set the color of your app's title bar on Windows.

Use Both

In my experience, desktop chromium-based browsers (Chrome, Edge, etc) will use the theme-color meta tag over the theme_color in the manifest when setting the color the of the app title bar.

So which should you use? Use both and set them to the same value (as mentioned on web.dev).

Hopefully you found this post helpful, if you have any questions you can find me on Twitter.

There is an App for That (But Shouldn't Be)
How to Write TypeScript Interfaces in JSDoc Comments