theme-color仅在Chrome/Edge/Samsung Internet for Android及Firefox Android（v96+）生效，iOS Safari完全不支持；需HTTPS、静态置于head靠前、十六进制色值，且PWA manifest中theme_color会覆盖它。
theme-color meta 标签在哪些浏览器生效
theme-color 是一个 <meta> 标签，只影响部分 Android 浏览器的 UI 颜色（比如地址栏、任务切换界面顶部），对 iOS Safari 完全无效——苹果从不支持该标签，无论你写 #ff6b6b 还是 rgb(255,107,107)，Safari 都会忽略。
真正能响应它的主要是 Chrome for Android、Edge for Android 和部分基于 Chromium 的国产安卓浏览器（如 Samsung Internet）。Firefox for Android 也不支持。
所以如果你看到“主题色没变”，先确认设备和浏览器：iOS 设备直接放弃；Android 上用 Chrome 打开，再检查是否生效。
正确的 theme-color 写法和常见错误
必须写在 <head> 里，且值只能是十六进制颜色（#rrggbb 或 #rgb），不支持命名色（red）、RGB 函数（rgb(255,0,0)）、HSL 或透明度（rgba()）——这些都会被浏览器静默忽略。
立即学习“前端免费学习笔记（深入）”；
常见错误包括：
- 把
<meta name="theme-color" content="#ff6b6b">放在<body>里 → 不解析 - 用了
themeColor（驼峰）或themecolor（小写）→ 必须是theme-color（中划线） - 写了多个
theme-color标签 → 只取第一个，后面全部丢弃 - content 值带空格或引号外多余字符，比如
content=" #ff6b6b "→ 失效
如何动态更新 theme-color（比如夜间模式切换）
不能靠 JS 修改 document.head 里的 <meta> 就立刻生效——Chrome for Android 仅在页面加载或导航时读取一次，后续修改不会触发 UI 重绘。
可行做法只有两种：
- 页面跳转后重新加载（比如夜间模式开关触发
window.location.reload()） - 使用 PWA 场景下的
manifest.json中的theme_color字段（配合display: standalone），此时系统会在启动 PWA 时读取 manifest，比 meta 更可靠
注意：manifest.json 的 theme_color 也只支持十六进制，且必须与 <link rel="manifest"> 正确关联，否则 fallback 到 meta 标签。
替代方案：iOS 上怎么实现类似效果
iOS 没有 theme-color，但可以通过 <meta name="apple-mobile-web-app-status-bar-style"> 控制状态栏文字颜色，配合 <meta name="apple-mobile-web-app-capable" content="yes"> 启用全屏模式：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
可选值只有 default、black、black-translucent，不支持自定义颜色。真正要控制状态栏背景色，必须走原生 App 或 Capacitor/Cordova 插件（如 @capacitor/status-bar），纯 Web 无解。
所以跨平台项目里，别指望单靠一个 meta 标签统一控制——Android 看 theme-color，iOS 看 apple-mobile-web-app-status-bar-style，而且两者语义和能力完全不同。
