# iOS 主屏 Web 应用的状态栏颜色来源
> 在 iOS 18.6.2 上，主屏应用的状态栏条带取页面的 theme-color meta，页面没有 meta 时才用 manifest 的 theme_color。
import LabEvidenceLine from '@components/lab/LabEvidenceLine.astro';
import LabHarnessLinks from '@components/lab/LabHarnessLinks.astro';
import LabResults from '@components/lab/LabResults.astro';
import LabBacks from '@components/lab/LabBacks.astro';
import LabProvenance from '@components/lab/LabProvenance.astro';
使用默认状态栏样式的主屏 Web 应用，如果页面的 `` 与 manifest 的 `theme_color` 不同，或者只声明了其中一个，iOS 18.6.2 上显示时间、信号和电量的那条条带会取哪个颜色？
状态栏条带优先取页面 theme-color meta 的颜色，没有 meta 时取 manifest 的 theme_color。截图拍于 2026-10-20，设备是 iPhone 16 Pro，系统为 iOS 18.6.2（22G100）。
## 设置不同的主题色
主测试无法区分颜色来源。实验室和演示应用的 manifest 都声明 `theme_color` `#161616`，截图中的应用内页面也都声明了 `#161616` 的 `theme-color` meta。当晚的补测（第 18c 步）安装了三个独立应用，各有自己的 manifest 和作用域。页面为白色，没有页头，使用默认状态栏样式（没有 `apple-mobile-web-app-status-bar-style` meta），也没有 `viewport-fit=cover`。
| 应用 | 网址 | manifest `theme_color` | 页面 `theme-color` meta |
|---|---|---|---|
| M1 | `/lab/device-tests/t4/theme-m1/` | `#d00000`（红） | `#00a050`（绿） |
| M2 | `/lab/device-tests/t4/theme-m2/` | 无 | `#d00000`（红） |
| M3 | `/lab/device-tests/t4/theme-m3/` | `#00a050`（绿） | 无 |
第四种情形是在已有的 PWA Lab 应用内打开 `theme-red` 页面，其 meta 为 `#d00000`，而实验室 manifest 为 `#161616`。每种结果对应的解读（例如「M1 为红色说明 manifest 优先」）在截图之前就写进了操作清单。
我们从截图读取条带颜色。代理在每张 1206 x 2622 的截图中，于条带内避开时间和电量字形取了六个像素点：(30, 20)、(400, 30)、(600, 100)、(1150, 170)、(30, 170)、(600, 180)；这台 iPhone 上条带止于 y 186（N64）。操作员也逐一报出了条带颜色。M1 至 M3 没有仪器读数。主测试中，默认样式页面的几何有仪器读数（内部高度 812/874，`safe-area-inset-top` 为 0，N25 至 N29），另有 17 张竖屏截图用同样方法取样（N62）。
## 怎么运行
1. 在 Safari 中打开 `https://openpwa.net/lab/device-tests/t4/theme-m1/`，点按**分享** → **添加到主屏幕** → **添加**。对 `…/t4/theme-m2/` 和 `…/t4/theme-m3/` 重复一遍。添加后得到三个独立应用，对应灰色的「M1」「M2」「M3」图标。
2. 保持浅色外观（设置 → 显示与亮度）和竖屏。
3. 从图标打开每个应用，截一张能看到条带的图。这些页面会打印各自的 manifest 颜色、meta 颜色和 `standalone / true`。
4. 也可以打开 PWA Lab 应用（把 `https://openpwa.net/lab/device-tests/` 添加到主屏幕），在 T4 表格中于应用内打开 **theme-red** 并截图。
5. 先说出每条条带的颜色，再用图片编辑器在条带内、避开时间和电量字形的位置取几个像素核对。
6. 根据颜色判断结果。M1 为绿色表示 meta 优先于 manifest；M2 为红色表示没有 manifest 颜色时用 meta；M3 为绿色表示 manifest 颜色是后备。
截图按 `____.png` 命名，例如 `2026-10-20_iphone16pro_ios18.6.2_T4_18c_M1.png`。
## 结果
在 iOS 18.6.2 上，只要页面有 `theme-color` meta，条带就取它，即使与 manifest 不同也是如此；页面没有 meta 时退回 manifest 的 `theme_color`。每张图的六个取样点完全相同。M1 为 `#00a050`（meta，压过 manifest 的 `#d00000`），M2 为 `#d00000`，M3 为 `#00a050`，PWA Lab 内的 `theme-red` 为 `#d00000`，压过实验室 manifest 的 `#161616`（S，N64、N65；操作员对四者的颜色描述全部一致，O）。`theme-red` 说明颜色随当前页面变化，添加应用时没有固定这个值。
主测试中，默认样式页面的 17 张竖屏截图里，条带都是 rgb(22, 22, 22)，即 `#161616`，其中 15 张的六个取样点全部如此。T4_4 里 (600, 100) 这一点落在系统铃声浮层上，读数为 `#000000`；T8_1a 里下方三个点落在通知横幅及其阴影上。除这些浮层外，条带从未出现 `#000000`，时间后面既没有模糊也没有页面内容（S，N62，浮层取样点已对照归档截图重读）；页面内容到不了条带，因为视口从屏幕顶部往下 62 px 才开始（A，N25 至 N29）。置信标签分别为颜色 S、几何 A。
在 Safari 标签页中，页面的蓝色页头滚走、页面顶部变白后，条带仍是 `#161616`（S，截图 T4_5，N62），可见标签页用 `theme-color` meta 给状态栏区域着色，没有从页面顶部内容取色。
:::caution
本次测试的以下读数不要引用。「状态栏是蓝色」和「条带跟随页面顶部颜色」已撤回。操作员当时描述的是页面的蓝色页头，不是状态栏（N46）。「`theme-color` 对状态栏没有作用」「条带与 `theme-color` 无关」和「应用使用 manifest 的 `theme_color`」都与截图不符（N65、N65-a），截图同时取代了早先对 `theme-red` 的「全黑」描述（N47）。`apple-mobile-web-app-status-bar-style` 取 `default` 或 `black` 的两个应用没有安装，无法据此下结论（N50-a）。
:::
## 来源中的主题色优先级
Web Application Manifest 把 `theme_color` 定为应用上下文的默认主题色，并规定当作用域内的文档含有 name 为 `theme-color` 的 meta 元素时，用户代理「可以」（MAY）覆盖默认主题色（[Web Application Manifest，`theme_color` 成员](https://www.w3.org/TR/appmanifest/#theme_color-member)，w3.org）。规范允许覆盖，但不作要求。WebKit 在 Safari 15 的文章中同时为 HTML meta 标签和 Web Manifest 引入了 `theme-color`，并说它会改变 iOS 15 上 Safari 的状态栏和过度滚动区域的颜色（[New WebKit Features in Safari 15](https://webkit.org/blog/11989/new-webkit-features-in-safari-15/)，webkit.org），但没有说已安装应用中哪个优先。MDN 介绍了这个 meta（[theme-color](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color)，MDN）。
BCD 记录 iOS 版 Safari 自 15 起支持 `html.elements.meta.name.theme-color`，备注为「自 Safari 26 起，主题色只用于已安装的 Web 应用」（[BCD html/elements/meta.json](https://github.com/mdn/browser-compat-data/blob/main/html/elements/meta.json)，github.com）；`manifests.webapp.theme_color` 同样自 15 起支持（[BCD manifests/webapp/theme_color.json](https://github.com/mdn/browser-compat-data/blob/main/manifests/webapp/theme_color.json)，github.com）；两者都在 2026-10-20 读取。两个条目都没有说明哪个来源优先。Firtman 的笔记列出 `theme_color` 自 15.0 起支持，并建议用 `theme-color` meta 取代 `apple-mobile-web-app-status-bar-style`（[iOS PWA Compatibility](https://firt.dev/notes/pwa-ios/)，firt.dev）。
实测为 BCD 的支持记录补充了条件。两种声明都如 BCD 所说受支持；在 iOS 18.6.2 的已安装应用中，页面 meta 优先，没有 meta 时回退到 manifest 颜色，记录了这个版本如何选择规范允许的颜色来源。本次测试把条带的几何与颜色算作对已有文档行为的 18.x 实测基线，不算新发现。这个清单成员见 [theme_color 与 background_color 清单成员](/zh/reference/manifest/theme-background-color/)。
## 数据
来自 [iOS 18.6.2 数据包](/zh/research/2026-10-ios18-home-screen-web-apps/data/)（CC BY 4.0）。
- [`2026-10-20_iphone16pro_ios18.6.2_T4_18c_M1.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_18c_M1.png)、[`…_T4_18c_M2.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_18c_M2.png) 和 [`…_T4_18c_M3.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_18c_M3.png)，三个应用（N64）。
- [`2026-10-20_iphone16pro_ios18.6.2_T4_12a.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_12a.png)，PWA Lab 内的 `theme-red`。
- [`2026-10-20_iphone16pro_ios18.6.2_T4_5.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_5.png)，页面顶部为白色的 Safari 标签页。
- 主测试截图 `T2_2`、`T4_2`、`T4_3a`、`T4_3b`、`T4_4`、`T7_sub_1`、`T8_1a`、`T4_reobs_1` 至 `T4_reobs_7` 和 `unassigned_1`，位于数据包的 `screenshots/` 目录（N62）。
- [`raw/2026-10-20-ios18.6.2-step15r-t4-baseline.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step15r-t4-baseline.json) 和 `step16-app-t4-{fixed,sticky,safe-area}.json` 读数记录几何（N25 至 N29）。
实验笔记 N25 至 N29、N46、N47、N62、N64、N65 和 N65-a 见 [`2026-10-ios18-baseline.md`](/research/2026-10-ios18-home-screen-web-apps/data/2026-10-ios18-baseline.md)。记录见 [`/lab/results.json`](/lab/results.json)。引用时写作「OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N65」。
## 相关参考条目
这一结果支撑关于 `theme-color` 与 manifest `theme_color` 如何为 iOS 已安装 Web 应用的状态栏着色的说法。
## 局限
- 颜色来源的证据是截图加操作员报告（S+O），M1 至 M3 没有仪器读数。截图流程的色彩处理没有与实测显示器核对。
- 未测页面不声明两种颜色的情形，也未测用 `media`（`prefers-color-scheme`）限定 meta。脚本在加载后修改 meta 只有 `dynamic` 页面的操作员报告，深色外观也只有操作员报告（N48），两者均未测量。横屏未测。
- 只测了默认状态栏样式。`black-translucent` 会让页面画到条带下面，见 [black-translucent 下的视口几何](/zh/lab/behaviour/status-bar-black-translucent-geometry/)；`default` 与 `black` 没有安装。
- 一台 iPhone 16 Pro、一个版本、一名操作员。关于 iOS 26 和 27 的说法，例如 `theme-color` 在那里「没有作用」（[Modern Web Weekly #80](https://modernwebweekly.substack.com/p/so-whats-up-with-the-ios27-blur)，substack.com），本次没有测试；这次测试是它们的 18.6.2 基线。