---
title: The theme-color Meta Tag, Explained
description: What <meta name="theme-color"> does, how to set different colours for light and dark, and why it should match your manifest theme_color.
canonical: https://favicontools.com/blog/theme-color-guide
---

# The theme-color Meta Tag, Explained

One line of HTML that tints the address bar on mobile Chrome and the title bar on installed apps. Here is how to use it well.

> **Short answer:** Add <meta name="theme-color" content="#0b0b0f"> to your <head>. It colours the browser UI around your page: the address bar on mobile Chrome and the title bar on an installed PWA. Use the media attribute to set separate colours for light and dark mode.

## What it actually paints

The theme-color meta tag tells the browser what colour to use for chrome that sits next to your page. On mobile Chrome and some Android browsers that is the address bar and status bar. On an installed PWA it is the title bar and the surrounds. On desktop browsers it usually does nothing, so treat it as a mobile and installed-app feature.

The value is a single CSS colour. A hex value is the safe choice. Pick something that reads as your brand and still leaves white or light text legible, because the browser draws its own icons and text on top of your colour.

## Separate colours for light and dark

```html
<meta
  name="theme-color"
  content="#ffffff"
  media="(prefers-color-scheme: light)"
>
<meta
  name="theme-color"
  content="#0b0b0f"
  media="(prefers-color-scheme: dark)"
>
```

Two tags, each scoped with a media query. The browser picks the one that matches the user's current mode. Drop the media attribute if you only want one colour for both.

## Keep it in sync with the manifest

The web app manifest has its own theme_color field. That value is the installed-app equivalent of the meta tag: it sets the colour used when your site is launched from the home screen. The meta tag covers the browser tab, the manifest covers the installed window.

Set both, and set them to the same colour unless you have a real reason not to. A mismatch means your address bar is one colour in the browser and the title bar is another after install, which looks like a bug. See what is manifest.json and the web app manifest guide for the full field list.

> **The media attribute is not universal:** Older browsers ignore the media attribute and apply the first theme-color tag they find. Put your most sensible default first (light in most cases) so those browsers still get a reasonable colour.

## Common questions

### Does theme-color change my favicon?

No. theme-color only tints the browser UI around your page. It has no effect on the favicon in the tab, the apple-touch-icon, or any manifest icon. Those are separate image files.

### Why is my theme-color not working on desktop?

Most desktop browsers ignore theme-color. It is designed for mobile Chrome, some Android browsers, and installed PWA windows. Test it on a phone or after installing the app, not in a desktop tab.

### Should theme-color match the manifest theme_color?

Yes, in almost every case. The meta tag colours the browser tab and the manifest theme_color colours the installed app window. Different values mean the colour jumps when a user installs your site.