Customise system statusbar colour when this app is open

Explanation for what exactly happened: I added a margin to the
header, made the app fullscreen, and activated a magic setting in
the manifest to render the system statusbar on *top of* the app.
Thanks to the following blog post for teaching me how:

  https://kaios.dev/2023/03/complete-manifest.webapp-guide/

public/global.css

@@ -2,6 +2,7 @@ html,
 body {
   font-size: 1.7em;
   font-weight: 400;
+  background: #6800a5;
 }
 
 #splash {

public/kaios-native-ui.css

@@ -162,7 +162,7 @@ body {
 #content {
   overflow: var(--content-overflow);
   width: 100vw;
-  height: calc(100% - 5.8rem);
+  height: calc(100% - 5.8rem - 26px);
 }
 
 /* Toast */
@@ -194,7 +194,7 @@ body {
   vertical-align: middle;
   line-height: 2.8rem;
   height: 2.8rem;
-  padding: 0 1rem 0 1rem;
+  padding: 26px 1rem 0 1rem;
   background: var(--header-background);
   color: var(--header-color);
   font-size: 1.7rem;

public/manifest.webapp

@@ -10,7 +10,12 @@
     "64": "/images/icon-64.png",
     "48": "/images/icon-48.png"
   },
-  "theme_color": "#FFFFFF",
+  "theme_color": "#6800a5",
+  "fullscreen": true,
+  "background-color": "transparent",
+  "chrome": {
+    "statusbar": "overlap"
+  },
   "developer": {
     "name": "Badri Sunderarajan",
     "url": "https://fosstodon.org/@badrihippo"