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

theme-color tints browser UI surfaces such as tab and address bar areas, not 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