Limited support Use with care and provide a fallback when broad support matters.

<meta name="theme-color">

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

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

html

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

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

Metadata and scripts

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.meta.name.theme-color
73
79
15
92
15
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Chrome uses the color only on installed progressive web apps.
  • Chrome reports support, but does not actually use the color anywhere.
Removed
  • This feature was removed in a later browser version (73)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Edge uses the color only on installed progressive web apps.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (92)
Implementation note
  • Chrome for Android does not use the color on devices with native dark mode enabled unless it's an installed progressive web app or a trusted web activity.

Syntax

HTML 
<meta name="theme-color" content="#3498db">
<meta name="theme-color"
  media="(prefers-color-scheme: dark)"
  content="#1a1a2e">

Live demo

Theme color examples

Show how different theme colors can influence browser UI chrome on supporting platforms.

PreviewFullscreen

Where it appears

Explain that theme-color affects browser UI surfaces rather than document content.

PreviewFullscreen

Selection tips

Use theme colors that match the brand without reducing contrast in browser chrome.

PreviewFullscreen

Use cases

  • Control document behavior

    Use <meta name="theme-color"> to influence loading, metadata, or script behavior at the document level.

  • Tune performance strategy

    Apply <meta name="theme-color"> when earlier resource hints or document settings improve startup or runtime behavior.

Cautions

  • Test <meta name="theme-color"> in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure <meta name="theme-color"> supports the intended task without making the page harder to perceive, understand, or operate.

Related links