当flutter web应用程序作为PWA安装时,如何更改菜单栏的颜色



我创建了一个flutter web应用程序。当我从URL将该应用程序安装为渐进式web应用程序时,菜单栏的颜色不是清单文件中指定的颜色。

这是manifest.json文件:

{
"short_name": "Lorem",
"name": "Lorem Ipsum",
"description": "Neque porro quisquam est qui dolorem ipsum",
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"background_color": "#393557",
"theme_color": "#393557",
"display": "minimal-ui",
"orientation": "portrait-primary"
}

这是我的index.html文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Neque porro quisquam est qui dolorem ipsum">
<meta name="robots" content="noindex">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Lorem ipsum">
<meta id="flutterweb-theme" name="theme-color" content="#393557">
<link rel="apple-touch-icon" href="/icons/Icon-192.png">
<title>Lorem ipsum</title>
<link rel="manifest" href="/manifest.json">
</head>
<body id="app-container">
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

少了什么?任何帮助都会很棒。谢谢

将这个元标记放在"头部;标记。

<meta name="theme-color" content="#393557">

它将更改移动浏览器的顶部菜单颜色。

相关内容

  • 没有找到相关文章

最新更新