theme-color meta tag vs manifest theme_color

#pwa #web #design

`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).

DEV Community

theme-color meta tag vs manifest theme_color