Manifest theme_color 与 background_color

一句话： theme_color 将浏览器地址栏、标题栏与系统任务切换器条目染成品牌色；background_color 填充从启动到首次绘制之间显示的启动画面。两者共同消除启动时的“空白闪屏”，让已安装应用从一开始就浑然一体。

语法

{
  "theme_color": "#1a1a2e",
  "background_color": "#1a1a2e"
}

两个字段均接受任意有效的 CSS 颜色值：颜色名称、十六进制、rgb()、hsl()、oklch()。透明值不被支持，会回退到浏览器默认值。

各字段的控制范围

字段	控制内容
`theme_color`	地址栏/标题栏色调（Android Chrome、桌面 Edge/Chrome）；系统任务切换器卡片背景；安装对话框强调色
`background_color`	从启动到 CSS 解析完毕前的启动画面背景；在部分 Android 版本上也用作状态栏背景的回退值

与 `<meta name="theme-color">` 的关系

Chrome 与 Edge 也会读取页面 <head> 中的 <meta name="theme-color" content="...">。当两者同时存在时：

页面加载后，<meta> 标签优先生效。
页面加载前（启动画面、安装对话框），使用清单中的 theme_color。
在 Android 上，<meta> 标签可以逐页动态改变地址栏颜色；当没有 <meta> 标签时，清单值作为回退。

最佳实践：在清单中将 theme_color 设为主要品牌色，并在 <meta> 标签中镜像相同值，保持两者一致。

深色模式注意事项

清单本身不原生支持针对不同配色方案分别设置 theme_color。要处理深色模式，可以：

在页面加载后通过带 media 属性的 <meta> 标签动态切换：

<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0d0d1a" media="(prefers-color-scheme: dark)">

清单中的 theme_color 设为最适合你的主要/默认配色方案的值，因为它决定了加载前的启动画面颜色。

background_color 与启动画面

启动画面由操作系统（而非浏览器）负责显示，出现在用户点击图标到首次绘制就绪之间。它通常包含：

background_color 作为屏幕填充色。
以 icons 中的应用图标居中显示。
图标下方显示 name 或 short_name（取决于平台）。

将 background_color 与 CSS 中 <body> 的页面背景色保持一致，可避免启动画面过渡到已加载页面时出现颜色闪烁。

平台支持

平台	`theme_color`	`background_color`
Android（Chrome）	地址栏、任务切换器	启动画面
Android（Samsung Internet）	地址栏	启动画面
Windows（Edge）	标题栏	启动画面
macOS（Chrome/Edge）	不生效	启动画面
iOS（Safari）	不支持	用于启动图像背景

iOS Safari 不支持 theme_color。如需在 iOS 上自定义状态栏样式，请使用 <meta name="apple-mobile-web-app-status-bar-style">。

实践清单

theme_color 与主要品牌色一致。
background_color 与页面背景色一致，避免启动时颜色闪烁。
<meta name="theme-color"> 标签与清单中的 theme_color 保持一致。
若应用支持深色模式，已为两种配色方案分别设置带 media 查询的 <meta> 标签。
已在 Android 上从主屏幕启动并测试启动画面效果。
background_color 与图标之间有足够的对比度，确保启动画面上图标清晰可辨。