meta name="theme-color" 不是跨平台通用方案，仅对基于 Chromium 的 Android 浏览器及 PWA 安装后环境有效；iOS Safari 完全不支持该标签，无法通过它修改状态栏背景色。
theme-color 标签只在部分 Android 浏览器生效，iOS Safari 完全无视
直接说结论：meta name="theme-color" 不是跨平台通用方案，它仅对基于 Chromium 的 Android 浏览器（Chrome、Edge、Samsung Internet）以及 PWA 安装后环境有效；iOS Safari 从不读取该标签，无论你写得多么规范，状态栏背景色都不会变。
常见错误现象：meta name="theme-color" 已写进 ，HTTPS 也配好了，但 iOS 上仍是默认灰色状态栏——这不是你漏写了什么，是系统压根不支持。
必须满足的硬性条件：
-
meta必须静态声明在 HTML 的最早位置，JS 动态插入（如document.createElement('meta')）基本无效 - 页面需通过 HTTPS 或
localhost访问，HTTP 下 Chrome 会静默忽略 - 颜色值只能是十六进制格式（如
#4285f4），不支持rgb()、hsl()或 CSS 变量 - 若网站已注册 PWA，
manifest.json中的theme_color字段会覆盖meta标签，且优先级更高
如何让深色/浅色模式切换时同步更新 theme-color？
不能靠 JS 修改 content 属性后就指望浏览器立刻重绘状态栏。Chrome 在首次加载时读取一次 theme-color，后续 JS 更新大概率被忽略（除非触发完整页面重载）。
真正可行的做法是：服务端渲染（SSR）或构建时生成两套 HTML，分别对应深色/浅色主题的 meta 值；或者用 <link rel="alternate" href="..."> 配合用户偏好做跳转。
如果必须前端控制，可尝试以下折中方式：
- 监听
prefers-color-scheme，并在页面加载完成时立即设置meta内容（注意：仅对首次加载有效） - 避免重复添加多个
theme-color标签（比如用document.write或多次appendChild），会导致行为不可预测 - 推荐写法：
const meta = document.querySelector('meta[name="theme-color"]'); if (meta) meta.content = '#1a1a1a';
iOS 状态栏颜色和文字怎么调？没有 theme-color 就没招了？
iOS 没有等效于 theme-color 的背景色控制机制，但它提供另一个元标签：apple-mobile-web-app-status-bar-style，仅影响状态栏文字/图标颜色（不是背景色）。
可用值只有三个：default（黑色文字）、black（白色文字）、black-translucent（半透明黑底 + 白字）。它只在「添加到主屏幕」或 PWA 全屏模式下生效，普通 Safari 标签页里无效。
更现实的适配思路：
- 用
viewport的env(safe-area-inset-top)配合 CSSpadding-top，把内容下推，避开状态栏区域 - 配合
viewport-fit=cover，防止安全区被裁切 - 若 H5 运行在 WebView 或微信内嵌浏览器中，需依赖原生层控制状态栏（H5 仅发通知），
theme-color在这类环境里也可能被忽略或受限
为什么改了 theme-color 页面状态栏还是白的？排查清单
别急着重写代码，先核对这些实际容易被忽略的点：
- 检查当前是否在 iOS 设备上调试——是的话，直接放弃
theme-color，换思路 - 确认页面是否真的走 HTTPS：HTTP 下 Chrome 会完全跳过该标签，连控制台都不报错
- 清空浏览器缓存，尤其是 PWA 缓存；Chrome 有时会缓存旧的
manifest或首屏 HTML，导致新meta不生效 - 打开 DevTools → Application → Manifest，看
theme_color是否被 manifest 覆盖（值显示为灰色即表示被覆盖） - 检查
meta是否被框架（如 Vue/React SSR）延迟注入——它必须出现在首屏 HTML 字符串里，不能靠 hydration 补上
最麻烦的一点：即使所有条件都满足，某些安卓定制 ROM（如 MIUI、EMUI）也会选择性忽略 theme-color，这是系统层限制，前端无解。
