如何为PWA应用设置自定义标题栏颜色？

你的问题核心是不同平台对PWA标题栏颜色的读取逻辑不同，且当前配置存在不一致，导致theme_color仅在启动时生效。以下是针对性修复步骤：

1. 统一核心颜色配置 #

你已在manifest.json中设置了"theme_color": "#0d4c73"，但HTML头部的theme-color meta被注释掉了。部分浏览器会优先读取HTML中的配置，需取消注释并保持颜色一致：

<meta name="theme-color" content="#0d4c73" />

2. 适配Windows平台 #

Windows（Edge/Chrome）的PWA标题栏颜色需要msapplication-navbutton-color与theme_color匹配，你当前设置的红色和manifest的蓝色冲突，修改为：

<meta name="msapplication-navbutton-color" content="#0d4c73" />
<!-- 可选：将磁贴颜色也改为同色系，保持品牌统一 -->
<meta name="msapplication-TileColor" content="#0d4c73" />

同时确保display模式为standalone（你已设置），这是Windows PWA启用自定义标题栏的前提。

3. 适配iOS平台 #

iOS状态栏样式不能直接写颜色值，apple-mobile-web-app-status-bar-style的有效值为default、black、black-translucent。要让自定义theme-color生效，需将其改为：

<meta name="apple-mobile-web-app-status-bar-style" content="default" />

修改后iOS会自动应用HTML中theme-color的颜色作为状态栏背景。

4. 生效注意事项 #

• 清除浏览器缓存，重新安装PWA（旧的manifest配置可能被缓存）；
• 确保站点运行在HTTPS环境下（本地localhost除外），PWA特性依赖HTTPS；
• 确认display模式为standalone或fullscreen，browser/minimal-ui模式不会启用自定义标题栏。

星巴克的PWA之所以能保持绿色标题栏，就是因为统一了manifest和HTML的theme-color配置，同时针对各平台做了适配，且使用了standalone显示模式，确保颜色持久生效。

内容的提问来源于stack exchange，提问作者Richardson