From 0897dacf354bd2c31ecf657774ef3ec9004757fa Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Tue, 26 May 2026 16:59:37 +0100
Subject: [PATCH] fix: dark theme ios

---
 frontend/index.html         | 16 ++++++++++++++++
 frontend/src/hooks/index.ts | 17 ++++++++++++-----
 frontend/src/index.css      |  3 +++
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index a9aa68c3..28ce3fa1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,6 +7,22 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="theme-color" content="#fbfbfb" media="(prefers-color-scheme: light)" />
   <meta name="theme-color" content="#161616" media="(prefers-color-scheme: dark)" />
+  <script>
+    (function () {
+      try {
+        var stored = localStorage.getItem('selectedTheme');
+        var isDark = stored === 'Dark' ||
+          (stored == null && window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (isDark) document.documentElement.classList.add('dark');
+        var color = isDark ? '#161616' : '#fbfbfb';
+        document.head.querySelectorAll('meta[name="theme-color"]').forEach(function (m) {
+          m.removeAttribute('media');
+          m.setAttribute('content', color);
+        });
+      } catch (e) { }
+    })();
+  </script>
   <title>DocsGPT</title>
   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 </head>
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index 292a752f..037d666a 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -98,11 +98,18 @@ export function useDarkTheme() {
 
   useEffect(() => {
     localStorage.setItem('selectedTheme', isDarkTheme ? 'Dark' : 'Light');
-    if (isDarkTheme) {
-      document.body?.classList.add('dark');
-    } else {
-      document.body?.classList.remove('dark');
-    }
+    const action = isDarkTheme ? 'add' : 'remove';
+    document.body?.classList[action]('dark');
+    document.documentElement.classList[action]('dark');
+
+    const color = isDarkTheme ? '#161616' : '#fbfbfb';
+    document.head
+      .querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]')
+      .forEach((m) => {
+        m.removeAttribute('media');
+        m.setAttribute('content', color);
+      });
+
     setComponentMounted(true);
   }, [isDarkTheme]);
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 32d1189d..05c9c28b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -195,6 +195,9 @@ layer(base);
     }
   }
 
+  html {
+    background-color: var(--background);
+  }
   body.dark {
     background-color: var(--background);
   }