uni-app导航栏主题色无法通过CSS变量动态修改，H5和小程序必须在pages.json中静态配置，App端仅支持uni.setNavigationBarColor设置backgroundColor和textStyle（"white"/"black"），且需分平台处理。
导航栏主题色不能靠 CSS 变量动态改
uni-app 的导航栏（navigationBar）是原生渲染层，H5 和小程序不支持用 :root 或 document.documentElement.style.setProperty 修改其颜色；App 端虽可通过 JS 调用 API 控制，但仅限 backgroundColor 和 textStyle（即 "white" 或 "black"），且不接受任意色值。
常见错误现象：在 onLoad 里直接写 uni.setNavigationBarColor({ backgroundColor: '#ff6b6b' })，结果 H5 无反应、小程序报错、App 端部分机型失效。
- 必须区分平台：H5 小程序的导航栏样式只能通过
pages.json静态配置；App 端才支持运行时调用uni.setNavigationBarColor -
textStyle不是文字颜色，而是系统级语义值 ——"white"表示浅色文字（通常为白色），"black"表示深色文字（通常为黑色），不能传"#333"这类值 - App 端调用需配合
navigationBarBackgroundColor，否则华为/小米等机型可能忽略textStyle
点击触发导航栏主题切换的实操步骤
假设你有一个“切换主题”按钮，点击后要同步更新导航栏背景与文字风格（比如从浅色主题切到深色主题）：
- 先用
uni.setStorageSync('theme', 'dark')持久化当前主题，避免页面刷新丢失 - 在目标页面的
onLoad或onShow中读取主题：const theme = uni.getStorageSync('theme') || 'light' - 根据主题查表映射导航栏参数：
const navConfig = { light: { backgroundColor: '#ffffff', textStyle: 'black' }, dark: { backgroundColor: '#1e1e1e', textStyle: 'white' } } - App 端调用：
uni.setNavigationBarColor(navConfig[theme])；H5 和小程序则忽略该调用，靠pages.json的静态配置兜底
pages.json 是 H5/小程序导航栏主题的唯一可控入口
你无法在运行时让 H5 或小程序的导航栏变成任意颜色 —— 它们不执行 JS 设置，只认 pages.json 里的声明。所以主题切换必须提前生成多套配置。
- 全局配置写法（影响所有页面）：
"globalStyle": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "我的应用" } - 单页覆盖写法（推荐）：在
pages数组中为每个页面加style字段，值可绑定变量（仅编译期有效，不能运行时改） - 真正在运行时“切换”，本质是跳转到另一个已预设好导航栏样式的页面，或 reload 当前页（触发
pages.json重读）—— 但 reload 体验差，不推荐
为什么不要在 App.vue 的 onLaunch 里统一设导航栏
onLaunch 是整个 App 启动时执行一次，但导航栏是按页面独立渲染的。你在 onLaunch 里调用 uni.setNavigationBarColor，只会影响首个页面，后续页面仍按 pages.json 或自身 onLoad 设置生效。
- 正确做法：把导航栏设置逻辑下沉到每个页面的
onShow，确保每次进入都重新拉取主题并设置 - 注意延迟：Android 部分机型需
setTimeout(() => uni.setNavigationBarColor(...), 100)才能生效 - iOS 需确认
Info.plist中UIViewControllerBasedStatusBarAppearance为YES，否则textStyle被系统强制接管
真正麻烦的不是代码怎么写，而是各端能力割裂：H5 小程序只能静态配，App 端能动但受限多，状态栏文字颜色还依赖原生配置。别试图用一套 JS 逻辑打遍全端，老老实实分平台处理最稳。
