From e4e9369d54aa33f9573aefa46a7a54d6f1ce2922 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Thu, 11 Dec 2025 14:47:22 +0000
Subject: [PATCH] theme: set theme-color for ios devices

colours the search bar, sometimes.
---
 css/base.css        | 12 ++++--------
 html/header.txt     |  4 +++-
 ts/modules/theme.ts |  7 ++++++-
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/css/base.css b/css/base.css
index 0ec7b30..81d1e67 100644
--- a/css/base.css
+++ b/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;
+}
diff --git a/html/header.txt b/html/header.txt
index 3cf7470..a18919c 100644
--- a/html/header.txt
+++ b/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 }}",
diff --git a/ts/modules/theme.ts b/ts/modules/theme.ts
index e56b95b..bead74b 100644
--- a/ts/modules/theme.ts
+++ b/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) => {