The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <color>.


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

The following image shows the effect that the <meta> element above will have on a document displayed in Chrome running on an Android mobile device.

Image showing the effect of using theme-color
Image credit: from Icons & Browser Colors, created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
theme-color 73
Desktop Chrome only uses the color on installed progressive web apps. (Per caniuse.com.)
39 — 72
Desktop Chrome 39-72 claimed to have support, but did not actually use the color anywhere. Chrome for Android did use the color in the toolbar. (Per caniuse.com.)
No No No No No
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
theme-color No 80
Chrome for Android does not use the color on devices with native dark-mode enabled. (Per caniuse.com.)
No No No 6.2

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.