perf: adapting style tightBorder

Hk-Gosuto · Dec 29, 2023 · 4ea2b66 · 4ea2b66
1 parent 5576481
commit 4ea2b66
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git 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
@@ -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);