Platform
theme-color：为页面周围的浏览器界面着色
theme-color 是一个 meta 标签，告诉浏览器该把它自己在你页面周围的界面涂成什么颜色：Android 上 Chrome 的地址栏区域、已安装 PWA 的窗口界面，以及近期 Safari 的窗口顶部。你用一个 name 为 theme-color 的 meta 标签加一个颜色值来设置它，还可以用 media 属性声明两个，让它跟随浅色和暗色模式。web app manifest 在它的 theme_color 字段里为已安装的应用携带同样的值。
它改变了什么
theme-color 不会影响你页面内部的任何东西。它影响的是浏览器自己在页面周围的表面，好让应用与浏览器之间的边界不再是一条可见的接缝。在手机上，深色网站配白色地址栏会被看成两个各自独立的东西；让它们相配，则会被看成一个整体。
它是一种提示，而非保证。浏览器只在它有表面可着色的地方应用它，其他地方则忽略，而且有些浏览器会拒绝与自身文字对比度过低的取值。它被忽略时，什么也不会坏掉。
浅色与暗色变体
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">浏览器会选中第一个媒体查询匹配的标签。一个没有 media 属性的单独标签会在每种配色方案下都生效。
它在哪里生效
| 位置 | 效果 |
|---|---|
| Chrome on Android | 为地址栏和状态栏区域着色 |
| Installed PWA | 为应用的标题栏或状态栏着色 |
| Safari (recent versions) | 为 macOS 和 iOS 上的窗口顶部着色 |
| Desktop Chrome tabs | 对普通浏览器窗口无效果 |
theme-color 常见问题
theme-color 和 favicon 有关系吗？
只在于它们一起发布、并且应当保持一致这一点上。favicon 在标签页里标识网站；theme-color 为页面周围的浏览器界面着色。生成器把两者都产出，是因为它们来自同一套品牌配色。
允许哪些颜色值格式？
任何浏览器能解析的 CSS 颜色：hex、rgb()、hsl()、命名颜色。hex 是最稳妥的选择，因为它在各解析器之间都无歧义。
为什么我的 theme-color 被忽略了？
常见原因是：一个永远不匹配当前配色方案的 media 属性、一个在首次绘制之后才注入的标签，或者一个根本没有表面可着色的桌面浏览器。先在 Android 版 Chrome 上检查它，因为那里的效果最明显。