PWA style tweaks

views/webpage_base.tpl

@@ -4,8 +4,10 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta name="color-scheme" content="light dark">
+    <meta name="theme-color" content="white"/>
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
 
     <meta property="og:title" content="Spothole"/>
     <meta property="twitter:title" content="Spothole"/>

webassets/js/common.js

@@ -269,6 +269,10 @@ function latLonForGridSWCornerPlusSize(grid) {
 // Function to set dark mode on or off
 function enableDarkMode(dark) {
     $("html").attr("data-bs-theme", dark ? "dark" : "light");
+    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    metaThemeColor.setAttribute("content", dark ? "black" : "white");
+    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
+    metaAppleStatusBarStyle.setAttribute("content", dark ? "black-translucent" : "white-translucent");
 }
 
 // Startup function to determine whether to use light or dark mode

webassets/service-worker.js

@@ -6,7 +6,14 @@ const CACHE_URLS = [
   'apidocs/openapi.yml',
   'about',
   'css/style.css',
-  'js/code.js',
+  'js/add-spot.js',
+  'js/alerts.js',
+  'js/bands.js',
+  'js/common.js',
+  'js/map.js',
+  'js/spots.js',
+  'js/spotsbandsandmap.js',
+  'js/status.js',
   'img/logo.png',
   'img/favicon.ico',
   'img/icon-32.png',