Thetheme-color value for thename 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, you define a theme color using acontent attribute in the<meta> element as a CSS<color> value.

For example, to indicate that a document should usecornflowerblue as a theme color, set the<meta> as:

<meta name="theme-color" content="cornflowerblue" />

To set the media to which the theme color metadata applies, include themedia attribute with a valid media query list (see thetheme-color media query example).

Usage notes

A<meta name="theme-color"> element has the following additional attributes:

content

A<meta> element withname=theme-color must have acontent attribute that defines the theme color.The value ofcontent attribute is as follows:

<color> value

A valid color value, such as hexadecimal, RGB, named color, etc.

mediaOptional

Any valid media type or query.If provided, the options for the document's theme color defined in thecontent attribute are suggested to the browser when the media query matches.

Examples

Setting a color value

Consider the following code that uses<meta> to set a theme color:

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

The following image shows the effect of this setting in Chrome on an Android mobile device:

Image credit: fromIcons & Browser Colors, created and shared by Google and used according to terms described in theCreative Commons 4.0 Attribution License.

Using a media query withtheme-color

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

<meta  name="theme-color"  content="cornflowerblue"  media="(prefers-color-scheme: light)" /><meta  name="theme-color"  content="dimgray"  media="(prefers-color-scheme: dark)" />

Specifications

Browser compatibility

See also

• <meta>name attributecolor-scheme value
• color-scheme CSS property
• prefers-color-scheme media query