糟糕的 meta name="theme-color"

技术探索 > 前端工程 > 样式工程
2026, 简体中文
281 1.8~2.3 分钟 806

<meta name="theme-color"> 是一个标准元数据，可以用来改变浏览器 UI 的颜色，具体效果可参照 MDN 的示例。

在阅读了 Meta Theme Color and Trickery | CSS-Tricks 之后，我兴致勃勃地给博客主题加上了 <meta name="theme-color">，遇到了以下几个问题：

问题一

许多浏览器依旧不支持（测试日期 2026 年 3 月 15 日，均为当日能下载到的最新版本）：

  • 安卓版 Chrome 支持（浅色模式且非无痕模式），但基于相同内核的安卓版 Edge 不支持。
  • 安卓版 Firefox 不支持，安卓版 Via 不支持。

问题二

不能使用自闭合标签，否则在安卓版 Chrome 上也会失效。这应该是一个安卓版 Chrome 的缺陷。

<!-- ❌ -->
<meta name="theme-color" content="blue" />

<!-- 👍 -->
<meta name="theme-color" content="blue">

查看了 GitHub 和 CSS-Tricks 这两个网站的实现，确认他们的 <meta name="theme-color"> 都不是自闭合标签。
有趣的是，电脑端和手机端的 Safari 对 <meta name="theme-color"> 的支持较好，但苹果官网未使用 <meta name="theme-color">。

许多格式化工具会自动添加标签末尾的 /，不经意间就变成了自闭合标签。甚至 MDN 的示例都是自闭合标签。

问题三

这是 Halo CMS 暴露的一个问题，我猜测源于它假定 meta 标签不会有相同的 content。

补充：Halo CMS 主创表示这似乎是有意为之。

错误例 1

<meta name="theme-color" content="cyan" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="black" media="(prefers-color-scheme: dark)">

渲染结果（删除行表示渲染缺失）：

<meta name="theme-color" content="cyan" media="(prefers-color-scheme: light)"> <!-- [!code --] -->
<meta name="theme-color" content="black" media="(prefers-color-scheme: dark)">

错误例 2

<meta name="theme-color" th:if="true" content="cyan">
<meta name="theme-color" th:if="false" content="black">

渲染结果（删除行表示渲染缺失）：

<meta name="theme-color" content="cyan"> <!-- [!code --] -->

错误例 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)">

渲染结果（删除行表示渲染缺失）：

<meta name="theme-color" content="cyan" media="(prefers-color-scheme: light)"> <!-- [!code --] -->
<meta name="theme-color" content="black" media="(prefers-color-scheme: dark)"> <!-- [!code --] -->

总结

<meta name="theme-color"> 发挥功能的场景主要在于 PWA 和手机端。自 CSS-Tricks 的那篇文章后已经过去了将近 5 个年头（4 年 8 个月），各家浏览器支持依旧不乐观。
上面几个问题都是很常见的使用场景，这些问题存在也不是一天两天了，可见这个元数据的冷门程度。我判断这个元数据被广泛支持仍然遥遥无期。

关于本文

原标题为 糟糕的 <meta name="theme-color">，由于 Umami 统计 Bug，不得不将标题中 <> 移除。

数据记录

同时 Umami 导致 2026 年 3 月 15 日至 2026 年 3 月 18 日统计数据缺失。
以 Google Analytics 相关数据作为参考：

  • 2026.3.15：26 活跃用户，33 浏览次数
  • 2026.3.16：5 活跃用户，28 浏览次数
  • 2026.3.17：9 活跃用户，13 浏览次数
  • 2026.3.18：20 活跃用户，22 浏览次数
1

推荐文章