theme-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Example

html
<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.

You can provide a media type or query inside the media attribute; the color will then only be set if the media condition is true. For example:

html
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Specifications

Specification
HTML
# meta-theme-color

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
theme-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

See also