No idea why this requires so much code

index.html

@@ -18,14 +18,27 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <link rel="canonical" href="%VITE_WEBSITE%" />
+    <meta
+      name=""
+      data-theme-setting="manual"
+      content="#242526"
+      data-theme-light-color="#fff"
+      data-theme-light-color-temp="#ffff"
+      data-theme-dark-color="#242526"
+      data-theme-dark-color-temp="#242526ff"
+    />
     <meta
       name="theme-color"
+      data-theme-setting="auto"
       content="#fff"
+      data-content-temp="#ffff"
       media="(prefers-color-scheme: light)"
     />
     <meta
       name="theme-color"
+      data-theme-setting="auto"
       content="#242526"
+      data-content-temp="#242526ff"
       media="(prefers-color-scheme: dark)"
     />
     <meta name="google" content="notranslate" />

src/app.jsx

@@ -193,35 +193,82 @@ const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
 if (isIOS) {
   document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') {
+      const theme = store.local.get('theme');
+      let $meta;
+      if (theme) {
+        // Get current meta
+        $meta = document.querySelector(
+          `meta[name="theme-color"][data-theme-setting="manual"]`,
+        );
+        if ($meta) {
+          const color = $meta.content;
+          const tempColor =
+            theme === 'light'
+              ? $meta.dataset.themeLightColorTemp
+              : $meta.dataset.themeDarkColorTemp;
+          $meta.content = tempColor || '';
+          setTimeout(() => {
+            $meta.content = color;
+          }, 10);
+        }
+      } else {
         // Get current color scheme
         const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
           .matches
           ? 'dark'
           : 'light';
         // Get current theme-color
-      const $meta = document.querySelector(
+        $meta = document.querySelector(
           `meta[name="theme-color"][media*="${colorScheme}"]`,
         );
-      const color = $meta?.getAttribute('content');
+        if ($meta) {
-      if (color) {
+          const color = $meta.content;
-        let tempColor;
+          const tempColor = $meta.dataset.contentTemp;
-        if (/^#/.test(color)) {
-          // Assume either #RBG or #RRGGBB
-          if (color.length === 4) {
-            tempColor = color + 'f';
-          } else if (color.length === 7) {
-            tempColor = color + 'ff';
-          }
-        }
           $meta.content = tempColor || '';
           setTimeout(() => {
             $meta.content = color;
           }, 10);
         }
       }
+    }
   });
 }
 
+{
+  const theme = store.local.get('theme');
+  // If there's a theme, it's NOT auto
+  if (theme) {
+    // dark | light
+    document.documentElement.classList.add(`is-${theme}`);
+    document
+      .querySelector('meta[name="color-scheme"]')
+      .setAttribute('content', theme || 'dark light');
+
+    // Enable manual theme <meta>
+    const $manualMeta = document.querySelector(
+      'meta[data-theme-setting="manual"]',
+    );
+    if ($manualMeta) {
+      $manualMeta.name = 'theme-color';
+      $manualMeta.content =
+        theme === 'light'
+          ? $manualMeta.dataset.themeLightColor
+          : $manualMeta.dataset.themeDarkColor;
+    }
+    // Disable auto theme <meta>s
+    const $autoMetas = document.querySelectorAll(
+      'meta[data-theme-setting="auto"]',
+    );
+    $autoMetas.forEach((m) => {
+      m.name = '';
+    });
+  }
+  const textSize = store.local.get('textSize');
+  if (textSize) {
+    document.documentElement.style.setProperty('--text-size', `${textSize}px`);
+  }
+}
+
 subscribe(states, (changes) => {
   for (const [action, path, value, prevValue] of changes) {
     // Change #app dataset based on settings.shortcutsViewMode
@@ -244,23 +291,6 @@ function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [uiState, setUIState] = useState('loading');
 
-  useLayoutEffect(() => {
-    const theme = store.local.get('theme');
-    if (theme) {
-      document.documentElement.classList.add(`is-${theme}`);
-      document
-        .querySelector('meta[name="color-scheme"]')
-        .setAttribute('content', theme === 'auto' ? 'dark light' : theme);
-    }
-    const textSize = store.local.get('textSize');
-    if (textSize) {
-      document.documentElement.style.setProperty(
-        '--text-size',
-        `${textSize}px`,
-      );
-    }
-  }, []);
-
   useEffect(() => {
     const instanceURL = store.local.get('instanceURL');
     const code = decodeURIComponent(

src/pages/settings.jsx

@@ -82,9 +82,43 @@ function Settings({ onClose }) {
 
                     if (theme === 'auto') {
                       html.classList.remove('is-light', 'is-dark');
+
+                      // Disable manual theme <meta>
+                      const $manualMeta = document.querySelector(
+                        'meta[data-theme-setting="manual"]',
+                      );
+                      if ($manualMeta) {
+                        $manualMeta.name = '';
+                      }
+                      // Enable auto theme <meta>s
+                      const $autoMetas = document.querySelectorAll(
+                        'meta[data-theme-setting="auto"]',
+                      );
+                      $autoMetas.forEach((m) => {
+                        m.name = 'theme-color';
+                      });
                     } else {
                       html.classList.toggle('is-light', theme === 'light');
                       html.classList.toggle('is-dark', theme === 'dark');
+
+                      // Enable manual theme <meta>
+                      const $manualMeta = document.querySelector(
+                        'meta[data-theme-setting="manual"]',
+                      );
+                      if ($manualMeta) {
+                        $manualMeta.name = 'theme-color';
+                        $manualMeta.content =
+                          theme === 'light'
+                            ? $manualMeta.dataset.themeLightColor
+                            : $manualMeta.dataset.themeDarkColor;
+                      }
+                      // Disable auto theme <meta>s
+                      const $autoMetas = document.querySelectorAll(
+                        'meta[data-theme-setting="auto"]',
+                      );
+                      $autoMetas.forEach((m) => {
+                        m.name = '';
+                      });
                     }
                     document
                       .querySelector('meta[name="color-scheme"]')