如何更改 PWA 中的 Android 导航栏颜色？答案

【问题标题】：How to change the Android navigation bar color in a PWA?如何更改 PWA 中的 Android 导航栏颜色？
【发布时间】：2019-10-06 04:21:43
【问题描述】：

当我在 Android 主屏幕（Progessive Web App）上添加页面时，我想更改网页上 Android 导航栏的颜色，但是当我打开 PWA 时，Android 导航栏的颜色为黑色并且我想把颜色改成白色。在清单中，您可以更改主题的颜色，我也这样做，但仍然遵循黑色。

有可能吗？

我指的是 Android 导航栏，而不是通知栏。

【问题讨论】：

您想更改系统按钮的颜色吗？我认为这是不可能的，至少我还没有看到任何例子。
是的，我想更改系统按钮的颜色。感谢您的回答，我希望将来谷歌添加这个。然后我完成这篇文章。

标签： html google-chrome manifest progressive-web-apps

【解决方案1】：

据我所知，它目前不是 PWA 支持的功能。

【讨论】：

【解决方案2】：

您可以向 HTML 页面添加元标记。

<meta name="theme-color" content="#225577"/>

【讨论】：

感谢您的回答。我的意思是android导航栏。不是通知栏。
在 PWA 中我认为它们是相同的。您能否使用显示您的问题的屏幕截图来编辑问题？
好的，我上传了图片。

【解决方案3】：

您可以使用manifest.json 并设置"theme_color":"#000000"、"background_color": "#000000" - 您的浏览器可能会选择这些颜色并将它们应用到导航栏（或者可能不会，三星的标准浏览器过去常常忽略此设置并且从未更改过导航条颜色）。在 PWA（存在于 Android 原生应用程序中）中似乎仍然没有允许单独指定导航栏颜色的功能。

【讨论】：

不幸的是，这似乎不起作用，至少对于 Vue2 来说是这样。在 vue.config.js（pwa 对象）中没有设置这个（也没有 backgroundColor）。
仅供参考，Vue 与清单文件中的任何内容无关。这里的关注点分离。所以这不是与 Vue 相关的问题 :)

【解决方案4】：

导航栏的颜色不适用于深色主题。更改为浅色主题即可。

【讨论】：