糟糕的 <meta name="theme-color">
<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 的示例都是自闭合标签。
问题三
这是 Thymeleaf 暴露的一个问题，我猜测源于它假定 meta 标签不会有相同的 content。thymeleaf 已经接近一年没有提交了，开发分支也有半年以上的时间没有提交了，这个问题修复也可能遥遥无期。
错误例 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 个月），各家浏览器支持依旧不乐观。
上面几个问题都是很常见的使用场景，这些问题存在也不是一天两天了，可见这个元数据的冷门程度。我判断这个元数据被广泛支持仍然遥遥无期。
1