Color the browser title bar to match the theme

CHANGELOG.md

@@ -8,6 +8,7 @@ time the changelog page groups these bullets by the master commit that added the
 git: each group shows the commit's short hash and date, and its tag if the commit has one.
 So a release is simply a tag on master.
 
+- The browser's title bar and toolbar (Safari, and Chrome on Android) now take the color of the selected theme when a page loads instead of staying bright in dark mode; switching the theme on a page already open still needs a reload to update it in Safari
 - Switching the theme from the theme button now plays a circular reveal that grows out of the button (in browsers that support view transitions and when reduced motion is not requested)
 - Capped the "no data for this time range" illustration on the timeline page at a sensible width and centered it, instead of letting it stretch across a wide desktop window
 - Navigating between the top-bar tabs now animates in browsers that support view transitions (Safari 18.2+, Chrome): the blue underline slides to the new tab and the page slides out and in; other browsers navigate as before

spybot-web/src/main/resources/static/theme.js

@@ -6,6 +6,20 @@
 
 const themeStorageKey = 'tablerTheme'
 
+// Header (navbar) background per theme. Browsers such as Safari tint their title/tab bar with the
+// theme-color meta tag, so keep it in sync with the theme instead of leaving the bar bright in dark mode.
+const browserThemeColors = {light: '#ffffff', dark: '#1e293b'}
+
+function setBrowserThemeColor(realTheme) {
+    let meta = document.querySelector('meta[name="theme-color"]')
+    if (!meta) {
+        meta = document.createElement('meta')
+        meta.name = 'theme-color'
+        document.head.appendChild(meta)
+    }
+    meta.content = browserThemeColors[realTheme]
+}
+
 function configureTheme(wantedTheme) {
     function readTheme(wantedTheme, urlParams, allowedValues) {
         if (allowedValues.has(wantedTheme)) {
@@ -39,6 +53,7 @@ function configureTheme(wantedTheme) {
         }
 
         document.body.setAttribute("data-spybot-theme", theme)
+        setBrowserThemeColor(realTheme)
     }
 
     console.log("configuring theme")