theme_color 是 PWA 启动时浏览器 UI 栏的提示色，仅 manifest.json 定义生效（优先级高于 meta），Android Chrome/Edge/Samsung 支持，iOS Safari 完全忽略，不作用于普通网页标签页。
theme_color 不是 CSS 属性，也不是 JS 可动态改的样式——它是浏览器 UI 的提示色，只在特定环境生效，且优先级有明确层级。
manifest.json 里的 theme_color 才是 PWA 主题色主入口
Android Chrome、Edge、Samsung Browser 在“添加到桌面”后启动时，会读取 manifest.json 中的 theme_color 渲染地址栏/状态栏。它比 <meta name="theme-color"> 优先级更高，且支持深色模式 fallback（需配合 media 字段）。
- 必须放在项目根目录，路径如
/manifest.json，且通过<link rel="manifest" href="/manifest.json">引入 -
theme_color值必须是合法 CSS 颜色字符串，如"#3367D6"或"rgb(51, 103, 214)"，不支持var(--primary) - 若同时定义了
background_color和theme_color，前者只用于启动屏背景，后者才控制 UI 栏颜色 - iOS Safari 完全忽略该字段，它只认
<meta name="apple-mobile-web-app-status-bar-style">
<meta name="theme-color"> 的生效条件很苛刻
这个标签仅对 Android 系统上的 Chrome、Edge、三星浏览器有效，且必须满足全部条件才能染色地址栏：
- 页面必须通过 HTTPS 提供（localhost 除外）
- 必须写在
靠前位置，不能由 JS 动态插入（document.head.innerHTML += '...'无效） - 值必须是纯十六进制格式（如
#4285f4），带空格、引号或使用rgb()会静默失败 - 如果
manifest.json已存在且含theme_color，浏览器会直接忽略该 meta 标签 - 深色模式需显式写媒体查询：
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
iOS 上根本没 theme_color 这回事
Safari 不解析 theme_color 字段，也不响应 <meta name="theme-color">。想影响状态栏，只能靠苹果私有 meta：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="apple-mobile-web-app-capable" content="yes">：启用独立应用模式 -
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">：可选值为default、black、black-translucent，仅控制文字颜色和半透效果，无法指定任意颜色 - 真实颜色取决于页面最顶部元素的背景——Safari 会把状态栏“融合”进去，没有染色能力
真正容易被忽略的是：即使所有配置都写对了，theme_color 也只在 PWA 启动场景下起作用；普通网页标签页里它完全不生效。别指望它能替代 CSS 的 background-color 或主题切换逻辑。
