theme: set theme-color for ios devices

colours the search bar, sometimes.

css/base.css

@@ -66,9 +66,6 @@ html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\
 }
 
 @media screen and (max-width: 1024px) {
-    :root {
-        font-size: 0.9rem;
-    }
     .table-responsive table {
         min-width: 800px;
     }
@@ -287,11 +284,6 @@ p.top {
     margin-top: 0px;
 }
 
-.table-responsive {
-    overflow-x: auto;
-    font-size: 0.9rem;
-}
-
 #notification-box {
     position: fixed;
     right: 1rem;
@@ -496,3 +488,7 @@ section.section:not(.\~neutral) {
 .content li {
     text-align: start;
 }
+
+.input {
+    font-size: 16px !important;
+}

html/header.txt

@@ -3,6 +3,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="Description" content="jfa-go, a better way to manage Jellyfin users.">
 <meta name="color-scheme" content="dark light">
+<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#101010" media="(prefers-color-scheme: dark)">
+<meta name="theme-color" content="#ffffff">
 <meta name="robots" content="noindex">
 
 <link rel="apple-touch-icon" sizes="180x180" href="{{ .pages.Base }}/apple-touch-icon.png">
@@ -11,7 +14,6 @@
 <link rel="manifest" href="{{ .pages.Base }}/site.webmanifest">
 <link rel="mask-icon" href="{{ .pages.Base }}/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="msapplication-TileColor" content="#603cba">
-<meta name="theme-color" content="#ffffff">
 <script>
     window.pages = {
         "Base": "{{ .pages.Base }}",

ts/modules/theme.ts

@@ -85,7 +85,9 @@ export class ThemeManager {
             this._cssLightFiles.forEach((el) => document.head.appendChild(el));
         }
         localStorage.setItem("theme", document.documentElement.classList.contains("dark") ? "dark" : "light");
-
+        document.head
+            .querySelectorAll("meta[name=theme-color]")
+            .forEach((el) => el.setAttribute("content", dark ? "#101010" : "ffffff"));
         // this._metaTag.setAttribute("content", metaValue);
     };
 
@@ -110,6 +112,9 @@ export class ThemeManager {
             this._cssLightFiles.forEach((el) => document.head.appendChild(el));
         }
         // this._metaTag.setAttribute("content", `${mode} ${opposite}`);
+        document.head
+            .querySelectorAll("meta[name=theme-color]")
+            .forEach((el) => el.setAttribute("content", dark ? "#101010" : "ffffff"));
     };
 
     enable = (dark: boolean) => {