Limited supportUse with care and provide a fallback when broad support matters.
Metadata and scripts Limited support

<meta name="theme-color">

The name="theme-color" attribute for the <meta> HTML element sets the preferred color to customize the display of the page or the surrounding browser user interface. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Metadata and scripts

Overview

The name="theme-color" attribute for the <meta> HTML element sets the preferred color to customize the display of the page or the surrounding browser user interface. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

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

Powered by web-features