From 4ea2b66e1ac8b083ba6c78ad69c9754a98590b5e Mon Sep 17 00:00:00 2001
From: pacmandoh <pacmandoh@outlook.com>
Date: Wed, 27 Dec 2023 23:10:32 +0800
Subject: [PATCH] perf: adapting style tightBorder

---
 app/components/home.tsx | 23 ++++++++++-------------
 app/styles/globals.scss |  4 ++--
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 63d4341a9..16ec9a095 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -9,7 +9,7 @@ import styles from "./home.module.scss";
 import BotIcon from "../icons/bot.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 
-import { getCSSVar, useMobileScreen } from "../utils";
+import { useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
 import { ModelProvider, Path, SlotID } from "../constant";
@@ -127,22 +127,19 @@ function Screen() {
       '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);
+    if (shouldTightBorder || isMobileScreen) {
+      if (isHome) {
+        metaDescriptionDark?.setAttribute("content", "#1b262a");
+        metaDescriptionLight?.setAttribute("content", "#e7f8ff");
       } else {
-        const themeColor = getCSSVar("--theme-color");
-        metaDescriptionDark?.setAttribute("content", themeColor);
-        metaDescriptionLight?.setAttribute("content", themeColor);
+        metaDescriptionDark?.setAttribute("content", "#1e1e1e");
+        metaDescriptionLight?.setAttribute("content", "white");
       }
     } else {
-      const themeColor = getCSSVar("--white");
-      metaDescriptionDark?.setAttribute("content", themeColor);
-      metaDescriptionLight?.setAttribute("content", themeColor);
+      metaDescriptionDark?.setAttribute("content", "#151515");
+      metaDescriptionLight?.setAttribute("content", "#fafafa");
     }
-  }, [config.theme, isHome]);
+  }, [config.theme, isHome, shouldTightBorder, isMobileScreen]);
 
   return (
     <div
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index 7825ce5ef..4c7ff8ef6 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -12,7 +12,7 @@
   --second: rgb(231, 248, 255);
   --hover-color: #f3f3f3;
   --bar-color: rgba(0, 0, 0, 0.1);
-  --theme-color: #e7f8ff;
+  // --theme-color: #e7f8ff;
 
   /* shadow */
   --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
@@ -34,7 +34,7 @@
   --hover-color: #323232;
   --bar-color: rgba(255, 255, 255, 0.1);
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
-  --theme-color: #1b262a;
+  // --theme-color: #1b262a;
 
   div:not(.no-dark) > svg {
     filter: invert(0.5);