manifest.json 的 theme_color 仅在 pwa 安装后从主屏幕启动时生效，不影响普通网页状态栏；真正控制状态栏颜色的是 标签。
manifest.json 的 theme_color 不会直接控制 HTML 页面内的状态栏颜色 —— 它只对 PWA（渐进式 Web 应用）在安装后、启动时的原生外壳生效，且依赖浏览器和操作系统的支持机制。
为什么在普通网页中设置 theme_color 没有效果
很多开发者误以为只要在 manifest.json 里写了 "theme_color": "#4285f4"，打开网页时 Android 状态栏就会变蓝。实际不是这样：
-
theme_color是 PWA 安装流程的一部分，仅在用户“添加到主屏幕”并从主屏幕启动该 PWA 时，由浏览器（如 Chrome）或系统（如 Android）读取并应用到启动屏、地址栏、状态栏等原生 UI 区域 - 在普通浏览器标签页中访问网页（哪怕已注册 service worker），
theme_color完全不参与渲染，也不会影响<meta name="theme-color"> - 桌面端（Windows/macOS）基本不响应
theme_color；iOS Safari 完全忽略它
真正能控制状态栏颜色的是 <meta name="theme-color">
这是 HTML 层面唯一被广泛支持的、用于动态设置地址栏/状态栏配色的机制，适用于 Android Chrome、Edge、Samsung Internet 等主流移动浏览器：
- 必须放在
中，且建议在<title></title>之后、其他资源加载前尽早声明 - 值支持十六进制（如
#3367d6）、RGB（如rgb(51, 103, 214)），不支持命名色或透明度（rgba()会被忽略） - 可配合 JavaScript 动态修改：
document.querySelector('meta[name="theme-color"]').content = '#ff6b6b'，但仅对后续导航或重绘生效，当前页面可能需触发一次视觉变化（如滚动）才刷新 - 若同时存在
<meta name="theme-color">和manifest.json中的theme_color，Chrome 优先使用<meta>标签（尤其在未安装为 PWA 时）
theme_color 在 PWA 场景下的真实作用范围
只有当你的网站满足 PWA 条件（有 valid manifest.json + 注册了 service worker + 可离线访问），且用户执行了“添加到主屏幕”，再从主屏幕图标启动时，theme_color 才起效：
- Android：影响启动屏背景色、任务管理器中的卡片底色、部分浏览器的状态栏（如 Chrome 93+ 在全屏模式下）
- 桌面 PWA（Chrome/Edge）：影响窗口标题栏、任务栏图标高亮色（Windows）或 Dock 图标外框（macOS）
- 注意：即使安装成功，某些 Android 厂商定制系统（如 MIUI、EMUI）可能完全忽略
theme_color，无 fallback 行为 - 验证是否生效：打开 Chrome DevTools → Application → Manifest 标签页，查看 “Theme color” 是否解析成功，并确认 “Is installed” 为 true
常见错误与调试建议
遇到状态栏没变色，先排查这几个点：
-
manifest.json路径未在 HTML 中正确引用：<link rel="manifest" href="/manifest.json">必须存在，且href是绝对路径或相对于当前页面的正确路径 -
manifest.json文件返回 HTTP 状态码不是 200（如 404、CORS 报错），Chrome 控制台会显示 “Failed to load resource: manifest parse error” - 在非 HTTPS 环境下测试 PWA 功能（
theme_color仅在 HTTPS 或 localhost 下可用） - 误把
background_color当作状态栏色 —— 它只用于启动屏背景，不影响运行时状态栏 - 修改了
manifest.json但没清除浏览器缓存，导致旧版本仍在使用；可尝试在 Chrome 中访问chrome://apps→ 卸载 PWA 后重试
最稳妥的做法是：HTML 中写好 <meta name="theme-color"> 确保网页级状态栏可控，同时在 manifest.json 中补全 theme_color 和 background_color 以覆盖 PWA 安装场景。两者不是替代关系，而是分层协作 —— 很多人卡在只做了一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
