theme-color在iOS Safari中完全不解析，HTTP环境下Chrome直接跳过，且仅Android Chrome/Edge/Samsung Internet在HTTPS、静态置于head靠前、纯十六进制色值、无PWA manifest覆盖四条件同时满足时才生效。
theme-color 为什么写了没反应
不是代码没生效，而是浏览器根本没读——theme-color 在 iOS Safari 中完全不解析，HTTP 环境下 Chrome 直接跳过，<meta> 放在 <body> 或靠后位置也会被忽略。常见失效原因：
• 页面跑在 HTTP 下（必须 HTTPS 或 localhost）
• <meta name="theme-color"> 没写在 <head> 最前面，建议紧贴 <title> 后
• content 值用了 rgb(66, 133, 244)、var(--primary) 或带空格的 " #4285f4 " —— 只认纯十六进制格式，如 #4285f4 或简写 #45f
• 网站已注册 PWA，manifest.json 中的 theme_color 字段会覆盖 HTML 中的 theme-color 标签
Android Chrome 地址栏变色的硬性条件
缺一不可：
• 必须通过 HTTPS 或 localhost 访问
• <meta name="theme-color" content="#4285f4"> 静态写死在 <head> 靠前位置（JS 动态插入无效）
• content 值只能是十六进制颜色（#rrggbb 或 #rgb），不支持 rgba()、hsl()、命名色（如 blue）、CSS 变量或透明度（#4285f480 会被整个忽略）
• 若已配 PWA，manifest.json 中的 theme_color 优先级更高，且必须通过 <link rel="manifest" href="/manifest.json"> 正确引入，响应头需为 Content-Type: application/manifest+json
如何让 light/dark 模式自动匹配地址栏颜色
浏览器不会监听 prefers-color-scheme 并重绘，但支持静态 media 查询匹配：
• 必须并列写两条静态 <meta> 标签：<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> 和 <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
• 两个标签都得写死在 <head> 中，JS 插入无效
• 用户中途切换系统主题，地址栏颜色不会更新（无事件可监听，无重绘机制）
• 旧版 Android Chrome 不支持 media 属性，建议额外加一条无条件 fallback：<meta name="theme-color" content="#ffffff">
iOS 上别白费力气试 theme-color
theme-color 在所有版本 iOS Safari 中均被忽略，Apple 从未实现该特性。你看到的状态栏背景始终灰白，和这个标签无关。
• 想控制 iOS 状态栏文字颜色，唯一可行路径是：<meta name="apple-mobile-web-app-status-bar-style" content="black">（仅影响文字明暗，值只能是 default、black、black-translucent）
• 该 meta 标签只在「添加到主屏幕」或 PWA 全屏模式下生效
• 如果用了 PWA，manifest.json 中的 status_bar 字段（非标准字段，部分厂商支持）可能起效，但和 theme-color 完全无关
立即学习“前端免费学习笔记（深入）”；
实际生效范围非常窄：只对 HTTPS 下的 Android Chrome、Edge、Samsung Internet 有效；PWA 安装后场景由 manifest 控制；iOS 和 Firefox for Android 基本不用考虑。最易被忽略的是“静态写死”和“十六进制纯色”这两条，动态改、用变量、带 alpha 的写法，浏览器直接静默丢弃。
