Fix theme-color meta: remove+recreate tag to force iOS Safari update

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/reader/reader-view.tsx

@@ -55,7 +55,7 @@ export function ReaderView({
   const stageRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
-    const { page: pageColor, stage: stageColor } = themeOptions[themeIndex];
+    const { page: pageColor } = themeOptions[themeIndex];
     document.body.classList.add("reader-body");
     const previousBodyBackground = document.body.style.background;
     const previousHtmlBackground = document.documentElement.style.background;
@@ -63,21 +63,18 @@ export function ReaderView({
     document.body.style.background = pageColor;
     document.documentElement.style.background = pageColor;
 
-    // Sync browser chrome (status bar + navigation bar) with theme
-    let metaTheme = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
-    if (!metaTheme) {
-      metaTheme = document.createElement("meta");
-      metaTheme.name = "theme-color";
-      document.head.appendChild(metaTheme);
-    }
-    const previousThemeColor = metaTheme.content;
-    metaTheme.content = pageColor;
+    // Force iOS Safari to pick up theme-color by removing old tags and inserting a fresh one
+    document.querySelectorAll('meta[name="theme-color"]').forEach((m) => m.remove());
+    const metaTheme = document.createElement("meta");
+    metaTheme.setAttribute("name", "theme-color");
+    metaTheme.setAttribute("content", pageColor);
+    document.head.appendChild(metaTheme);
 
     return () => {
       document.body.classList.remove("reader-body");
       document.body.style.background = previousBodyBackground;
       document.documentElement.style.background = previousHtmlBackground;
-      if (metaTheme) metaTheme.content = previousThemeColor;
+      metaTheme.setAttribute("content", "#f4efe7");
     };
   }, [themeIndex]);