From 2a81f1aea0fe815ca61e7c405b5ed38ec85294aa Mon Sep 17 00:00:00 2001
From: pacmandoh <pacmandoh@outlook.com>
Date: Tue, 26 Dec 2023 22:28:11 +0800
Subject: [PATCH] perf: adapting safari theme-color

---
 app/components/home.tsx | 68 ++++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 5fe50624b..63d4341a9 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -59,37 +59,6 @@ const Plugins = dynamic(async () => (await import("./plugin")).PluginPage, {
   loading: () => <Loading noLogo />,
 });
 
-export function useSwitchTheme() {
-  const config = useAppConfig();
-
-  useEffect(() => {
-    document.body.classList.remove("light");
-    document.body.classList.remove("dark");
-
-    if (config.theme === "dark") {
-      document.body.classList.add("dark");
-    } else if (config.theme === "light") {
-      document.body.classList.add("light");
-    }
-
-    const metaDescriptionDark = document.querySelector(
-      'meta[name="theme-color"][media*="dark"]',
-    );
-    const metaDescriptionLight = document.querySelector(
-      'meta[name="theme-color"][media*="light"]',
-    );
-
-    if (config.theme === "auto") {
-      metaDescriptionDark?.setAttribute("content", "#151515");
-      metaDescriptionLight?.setAttribute("content", "#fafafa");
-    } else {
-      const themeColor = getCSSVar("--theme-color");
-      metaDescriptionDark?.setAttribute("content", themeColor);
-      metaDescriptionLight?.setAttribute("content", themeColor);
-    }
-  }, [config.theme]);
-}
-
 function useHtmlLang() {
   useEffect(() => {
     const lang = getISOLang();
@@ -139,6 +108,42 @@ function Screen() {
     loadAsyncGoogleFont();
   }, []);
 
+  // SwitchThemeColor
+  // Adapting Safari's theme-color and changing it according to the path
+  useEffect(() => {
+    document.body.classList.remove("light");
+    document.body.classList.remove("dark");
+
+    if (config.theme === "dark") {
+      document.body.classList.add("dark");
+    } else if (config.theme === "light") {
+      document.body.classList.add("light");
+    }
+
+    const metaDescriptionDark = document.querySelector(
+      'meta[name="theme-color"][media*="dark"]',
+    );
+    const metaDescriptionLight = document.querySelector(
+      'meta[name="theme-color"][media*="light"]',
+    );
+
+    if (isHome) {
+      if (config.theme === "auto") {
+        const themeColor = getCSSVar("--theme-color");
+        metaDescriptionDark?.setAttribute("content", themeColor);
+        metaDescriptionLight?.setAttribute("content", themeColor);
+      } else {
+        const themeColor = getCSSVar("--theme-color");
+        metaDescriptionDark?.setAttribute("content", themeColor);
+        metaDescriptionLight?.setAttribute("content", themeColor);
+      }
+    } else {
+      const themeColor = getCSSVar("--white");
+      metaDescriptionDark?.setAttribute("content", themeColor);
+      metaDescriptionLight?.setAttribute("content", themeColor);
+    }
+  }, [config.theme, isHome]);
+
   return (
     <div
       className={
@@ -191,7 +196,6 @@ export function useLoadData() {
 }
 
 export function Home() {
-  useSwitchTheme();
   useLoadData();
   useHtmlLang();