From 6703b27bfb949d3e4162c909a14401011a441bbe Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 23 Dec 2023 23:04:34 +0800
Subject: [PATCH] No idea why this requires so much code

---
 index.html             |  13 +++++
 src/app.jsx            | 110 ++++++++++++++++++++++++++---------------
 src/pages/settings.jsx |  34 +++++++++++++
 3 files changed, 117 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index 87bd391..44108ff 100644
--- a/index.html
+++ b/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" />
diff --git a/src/app.jsx b/src/app.jsx
index e613671..9d7ead6 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -193,35 +193,82 @@ const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
 if (isIOS) {
   document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') {
-      // Get current color scheme
-      const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
-        ? 'dark'
-        : 'light';
-      // Get current theme-color
-      const $meta = document.querySelector(
-        `meta[name="theme-color"][media*="${colorScheme}"]`,
-      );
-      const color = $meta?.getAttribute('content');
-      if (color) {
-        let tempColor;
-        if (/^#/.test(color)) {
-          // Assume either #RBG or #RRGGBB
-          if (color.length === 4) {
-            tempColor = color + 'f';
-          } else if (color.length === 7) {
-            tempColor = color + 'ff';
-          }
+      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
+        $meta = document.querySelector(
+          `meta[name="theme-color"][media*="${colorScheme}"]`,
+        );
+        if ($meta) {
+          const color = $meta.content;
+          const tempColor = $meta.dataset.contentTemp;
+          $meta.content = tempColor || '';
+          setTimeout(() => {
+            $meta.content = color;
+          }, 10);
         }
-        $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(
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 23c37fd..4cda2d2 100644
--- a/src/pages/settings.jsx
+++ b/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"]')