fix: dark theme ios

Author: dartpain

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>

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]);
 

frontend/src/index.css

@@ -195,6 +195,9 @@ layer(base);
     }
   }
 
+  html {
+    background-color: var(--background);
+  }
   body.dark {
     background-color: var(--background);
   }