theme-color Meta

Meta theme-color: brand-coloring the browser chrome on mobile and PWAs

The <meta name="theme-color"> tag is a tiny line of HTML that has an outsized branding impact: it tints the browser address bar on Android Chrome, the status bar on iOS Safari 15+, the title bar of installed Progressive Web Apps, the recent-apps switcher tile, the splash screen on PWA launch and even the embed previews on Discord, Slack and Telegram. A single line carries your brand color from the favicon into every native chrome the operating system exposes. Without it, the browser defaults to white or gray, breaking visual continuity between your page and its frame.

Syntax, color formats and dark-mode variants via media queries

The simplest form is <meta name="theme-color" content="#1e40af">. The content attribute accepts any valid CSS color: hex (#fff, #ffffff, #ffffffaa), rgb(), rgba(), hsl(), named colors (tomato) and even modern syntax like oklch() in the latest browsers. To support light and dark mode, ship two tags with the media attribute carrying prefers-color-scheme — the browser picks the one that matches the current OS appearance. This pairs perfectly with the same media query in your CSS.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#1e40af"> <!-- fallback -->

PWA manifest theme_color and iOS-specific quirks

A Progressive Web App also declares a theme color in its manifest.json, used for the splash screen, the standalone window chrome and the app switcher tile after install. Keep the manifest value in sync with the meta tag — otherwise users see one color in the browser and another in the installed app. iOS Safari adds a separate tag, <meta name="apple-mobile-web-app-status-bar-style">, which accepts default, black or black-translucent and controls the status bar when the user launches the site from the home screen in fullscreen mode. For Windows 10 / 11 pinned tiles, <meta name="msapplication-TileColor"> sets the start-menu tile background.

<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-TileColor" content="#1e40af">
<meta name="msapplication-navbutton-color" content="#1e40af">

// manifest.json
{
  "name": "1001 Tools",
  "theme_color": "#1e40af",
  "background_color": "#0f172a",
  "display": "standalone"
}

Updating theme-color dynamically with JavaScript

Modern interfaces sometimes animate theme-color as the user scrolls, switches sections, or opens a modal. The browser re-reads the meta tag whenever its content attribute changes, so a one-line script updates the chrome in real time. Combine this with a scroll listener or an Intersection Observer to match the header to the currently visible section. Browsers throttle the animation to about 60 fps, so very rapid changes are coalesced — keep the transition steady, not jittery.

const meta = document.querySelector('meta[name="theme-color"]')
function setThemeColor (hex) {
  meta.setAttribute('content', hex)
}
// Match the chrome to the active section
new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) setThemeColor(e.target.dataset.themeColor)
  })
}, { threshold: 0.6 }).observe(document.querySelector('.hero'))

Browser support, side effects and accessibility

• Chrome 39+ on Android — full support of the address bar tint.
• Safari 15+ on iOS — colors the top status bar and the bottom toolbar in tab mode.
• Firefox 100+ — partial support, mostly on Android.
• Desktop browsers — generally ignored; the chrome stays system-styled.
• Discord, Slack, Telegram embeds — many platforms use theme-color (or the manifest equivalent) to tint the side stripe of link previews.
• Accessibility — ensure the chosen color has enough contrast with the status-bar icons rendered on top of it; very light colors force the OS into "dark icons" mode, which sometimes fails on iOS.

FAQ

Does theme-color change the browser bar on desktop? No. Desktop browsers ignore the hint and keep the system-styled chrome. The tag is only useful on Android Chrome, iOS Safari 15+ and some embed contexts.

Should I keep the meta tag and the manifest theme_color in sync? Yes. The meta tag drives the in-browser experience; the manifest drives the installed PWA. Out-of-sync values produce a jarring transition during install.

Can I use a transparent color? Hex with alpha (#ff000080) and rgba() are accepted in modern browsers, but the effect is unpredictable because the OS composites them over its own background.

Does theme-color affect favicon coherence? Indirectly. A good visual identity uses the same hue for favicon, theme-color, manifest theme_color and Open Graph image background — that consistency is what users associate with your brand at a glance.

Can I animate theme-color smoothly? The browser does not animate the transition itself; it snaps to the new color. To simulate animation, update the meta tag in small increments with requestAnimationFrame, but expect throttling.