<meta name="theme-color"> is standard metadata intended to let a page influence the color of the browser UI. MDN has examples showing the kind of effect it is supposed to produce.
After trying to add it to a blog theme, the result was much less straightforward than the feature looks on paper. The problems below are all fairly ordinary usage scenarios, which makes the current state of this metadata feel especially underwhelming.
Browser support is still patchy
Tested on March 15, 2026, using the latest versions available that day, support was still far from consistent:
- Chrome for Android supports it, but only in light mode and outside Incognito mode. Edge for Android, despite being based on the same engine, did not support it in the same test.
- Firefox for Android did not support it.
- Via for Android did not support it.
The feature is mainly useful for PWAs and mobile browsers, so this lack of reliable mobile support is hard to ignore.
A self-closing meta tag can break it
On Chrome for Android, using a self-closing tag made <meta name="theme-color"> stop working. This looks like a Chrome for Android bug.
<!-- ❌ -->
<meta name="theme-color" content="blue" />
<!-- 👍 -->
<meta name="theme-color" content="blue">
The implementations on GitHub and CSS-Tricks both use a non-self-closing <meta name="theme-color"> tag.
There is an amusing contrast here: Safari on both desktop and mobile appears to have relatively good support for <meta name="theme-color">, yet Apple’s own website does not use it.
The self-closing form is also easy to introduce by accident. Many formatters automatically append the trailing / to tags, and even MDN’s example uses the self-closing style.
Halo CMS has trouble with repeated theme-color meta tags
Another problem appeared in Halo CMS. The behavior seems to come from an assumption that meta tags will not share the same content value. A core maintainer of Halo CMS later indicated that this may be intentional.
Broken example 1
<meta name="theme-color" content="cyan" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="black" media="(prefers-color-scheme: dark)">
Rendered result, where the removed line indicates missing output:
<meta name="theme-color" content="cyan" media="(prefers-color-scheme: light)"> <!-- [!code --] -->
<meta name="theme-color" content="black" media="(prefers-color-scheme: dark)">
Broken example 2
<meta name="theme-color" th:if="true" content="cyan">
<meta name="theme-color" th:if="false" content="black">
Rendered result, where the removed line indicates missing output:
<meta name="theme-color" content="cyan"> <!-- [!code --] -->
Broken example 3
<meta name="theme-color" th:if="true" content="cyan" media="(prefers-color-scheme: light)">
<meta name="theme-color" th:if="true" content="black" media="(prefers-color-scheme: dark)">
<meta name="theme-color" th:if="false" content="cyan" media="(prefers-color-scheme: light)">
<meta name="theme-color" th:if="false" content="blue" media="(prefers-color-scheme: dark)">
Rendered result, where the removed lines indicate missing output:
<meta name="theme-color" content="cyan" media="(prefers-color-scheme: light)"> <!-- [!code --] -->
<meta name="theme-color" content="black" media="(prefers-color-scheme: dark)"> <!-- [!code --] -->
Still a niche feature after all this time
Nearly five years—about four years and eight months—have passed since the CSS-Tricks article on meta theme color tricks. Browser support is still not encouraging.
The cases above are not exotic. They involve mobile browsers, dark-mode media queries, conditional rendering, and common formatter behavior. The fact that these issues have lingered for so long says a lot about how niche <meta name="theme-color"> remains. Broad, dependable support still looks a long way off.