iOS Safari不支持动态修改theme-color，唯一生效方式是静态meta标签且需满足三条件：位于index.html head中、id为themeColor、颜色值为十六进制；动态更新须清空后延时重设，onLoad与onShow均需执行。
uni-app H5端iOS导航栏背景色不协调的根源
根本不是颜色没设对，而是 iOS Safari 对 theme-color 元标签的解析行为和渲染时机与 Android/桌面浏览器完全不同。它不会响应运行时 JS 的动态修改，也不会在 SPA 页面切换时自动刷新——你调用 uni.setNavigationBarColor，H5 端直接忽略，控制台报 undefined is not a function，这不是 bug，是设计如此。
H5端iOS必须靠<meta name="theme-color">手动控制
这是唯一被 iOS Safari 原生识别并生效的方式，但必须满足三个硬性条件：
-
<meta>标签必须存在于index.html的<head>中，且有id="themeColor"（方便后续 JS 定位） - 颜色值必须是十六进制格式（如
#1e40af），不能是 rgb()、rgba() 或变量名 - 修改后需触发浏览器强制重绘：先清空
content，再重新赋值，延迟至少100ms
示例写法：
<meta name="theme-color" content="#ffffff" id="themeColor">
页面中动态设置：
onLoad() {
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
meta.setAttribute('content', '');
setTimeout(() => {
meta.setAttribute('content', '#1e40af');
}, 100);
}
}
为什么onShow里改经常失效
iOS Safari 在页面“可见”后才开始解析 theme-color，而 onShow 触发时页面可能尚未完成首次渲染。更糟的是，SPA 路由切换不触发页面重载，theme-color 不会自动更新。
- 不要依赖
onShow单次调用——它只在页面从隐藏态切回时触发，冷启动或首次加载不走这个逻辑 - 必须在
onLoad+onShow都写一遍，且都带setTimeout延迟 - 真机调试时，Safari 开发者工具里看不到
theme-color是否生效，只能靠肉眼观察顶部状态栏颜色变化
自定义导航栏是更可控的替代方案
如果主题色频繁切换或需要精确对齐返回按钮，theme-color 的延迟和不可控就不可接受。此时应放弃原生导航栏：
- 在
pages.json对应页面加"navigationStyle": "custom" - 用
uni.getSystemInfoSync().statusBarHeight获取高度，顶部放一个<view>模拟导航栏 - 该
<view>的背景色、文字色、按钮布局完全由你控制，不受平台限制 - 注意：H5 端启用后，
page元素会顶到 viewport 顶部，需手动加padding-top避免内容被状态栏遮挡
真正麻烦的从来不是怎么设颜色，而是你得同时适配三套机制：iOS Safari 的元标签、Android Chrome 的宽松策略、以及 uni-app 框架对不同平台的 API 封装差异。漏掉任意一环，颜色就错位。
