Manifest：theme_color / background_color 支持

Web App Manifest：theme_color / background_color —— theme_color 字段设置已安装 PWA 周围界面（如标题栏或任务切换器）所使用的颜色，background_color 字段设置页面加载期间显示的背景色。根据规范，浏览器会在每次页面加载时获取并处理清单文件，处理成功后可能（MAY）将更新后的颜色应用到该应用当前及未来的 application context——这两个字段并非只在安装时固定一次。

浏览器与生态支持

两个字段在各引擎上的支持并不一致。根据 MDN 的浏览器兼容性数据，Chrome、Edge 以及 Android 版 Firefox 同时支持这两个字段，桌面版 Firefox 两者都不支持，而 Safari 支持 theme_color（macOS Safari 17、iOS Safari 15），但完全没有实现 background_color。

• 图例
• 支持
• 部分支持
• 需开启标志
• 不支持
• 未知

浏览器 / 平台	支持	版本	置信度	来源	备注
Chrome (Desktop)	支持	46	高	来源	1
Chrome (Android)	支持	46	高	来源	23
Edge (Desktop)	支持	79	高	来源	45
Firefox (Desktop)	不支持	—	高	来源	67
Firefox (Android)	支持	79	高	来源	8
Safari (macOS)	支持	17	高	来源	9
Safari (iOS)	支持	15	高	来源	10
Samsung Internet	支持	5.0	高	来源	1112
WebView (Android)	支持	46	高	来源	1314
Chrome (Desktop)	支持	46	高	来源	15
Chrome (Android)	支持	46	高	来源	1617
Edge (Desktop)	支持	79	高	来源	1819
Firefox (Desktop)	不支持	—	高	来源	2021
Firefox (Android)	支持	79	高	来源	22
Safari (macOS)	不支持	—	高	来源	2324
Safari (iOS)	不支持	—	高	来源	252627
Samsung Internet	支持	5.0	高	来源	2829
WebView (Android)	支持	46	高	来源	3031

1. 对应 `theme_color` 条目。
2. 对应 `theme_color` 条目。
3. 由 browser-compat-data 镜像自 Chrome 的数据推导。
4. 对应 `theme_color` 条目。
5. 由 browser-compat-data 镜像自 Chrome 的数据推导。
6. 对应 `theme_color` 条目。
7. browser-compat-data 未记录 Firefox 的支持。
8. 对应 `theme_color` 条目。
9. 对应 `theme_color` 条目。
10. 对应 `theme_color` 条目。
11. 对应 `theme_color` 条目。
12. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。
13. 对应 `theme_color` 条目。
14. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。
15. 对应 `background_color` 条目。
16. 对应 `background_color` 条目。
17. 由 browser-compat-data 镜像自 Chrome 的数据推导。
18. 对应 `background_color` 条目。
19. 由 browser-compat-data 镜像自 Chrome 的数据推导。
20. 对应 `background_color` 条目。
21. browser-compat-data 未记录 Firefox 的支持。
22. 对应 `background_color` 条目。
23. 对应 `background_color` 条目。
24. browser-compat-data 未记录 Safari 的支持。
25. 对应 `background_color` 条目。
26. browser-compat-data 未记录 iOS 版 Safari 的支持。
27. 由 browser-compat-data 镜像自 Safari 的数据推导。
28. 对应 `background_color` 条目。
29. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。
30. 对应 `background_color` 条目。
31. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。

源数据: /compatibility/manifest-theme-background-color.json · 全球使用占比: 83 % (StatCounter 2026-05)

来源: 规范 · MDN · 最近核验 2026-10-03 · 置信度: 高 (由来源计算)

用法示例

{
  "name": "Example PWA",
  "theme_color": "#317EFB",
  "background_color": "#ffffff"
}

把 theme_color 当作渐进增强，而非特性检测

规范与 MDN 将 theme_color 和 background_color 记录为清单声明。对于 theme_color，MDN 文档记录了 <meta name="theme-color"> 元素是另一种独立设置同一 UI 颜色的方式。同时声明清单字段与 meta 标签是一种 渐进增强的组合：它并不检测任何能力，只是让不从清单读取 theme_color 的引擎 （如果它们支持该 meta 标签）有另一条获得同一颜色值的途径。

规范与 MDN 说明，用户代理可以覆盖清单中的 background_color 以支持 prefers-color-scheme。不支持它的 引擎会退回到该浏览器自定义的加载/启动画面背景行为，而不是规范定义的行为。

function ensureThemeColorMeta(color) {
  const existing = document.querySelector('meta[name="theme-color"]');
  if (existing?.content) {
    // 已经存在 meta 标签，以它为准。
    return;
  }
  // 声明 meta 标签作为清单 theme_color 字段的渐进增强组合。这并不能确认
  // 任何引擎会应用其中之一——各引擎的支持情况见上方兼容表。
  const meta = document.createElement('meta');
  meta.name = 'theme-color';
  meta.content = color;
  document.head.appendChild(meta);
}

实践清单

• 根据 MDN，页面上的 <meta name="theme-color"> 元素（可结合 prefers-color-scheme 媒体查询）会覆盖清单的 theme_color——清单中的值只是默认值。
• 根据 MDN，background_color 只是页面样式表加载完成前（以及部分启动画面）显示的 临时颜色；样式表加载后，页面自身的背景色会接管显示。
• 根据清单规范，两个字段的值都必须是能解析并转换为 sRGB 的 CSS <color> 值—— 这允许使用 lab()、color(display-p3 …) 等预定义颜色空间，不局限于传统的 十六进制/RGB/命名颜色。CSS 自定义属性与渐变不是 <color> 值，在此处无效。
• 根据 MDN，theme_color 的透明度（alpha）可能被浏览器忽略，因此不要依赖半透明的 theme_color 真的以透明效果渲染；MDN 并未对 background_color 记录同样的限制。
• Safari 完全没有实现 background_color，即使它支持 theme_color，也不要依赖前者 在 Safari 上生效。

下一步

• Web App Manifest: display
• Web App Manifest: icons

← 返回兼容性浏览器。