feat: adding iOS Webapp support

- fix media query about background-color
- Use colors from CSS files instead of fixed values

app/components/home.tsx

@@ -356,33 +356,21 @@ export function Chat(props: { showSideBar?: () => void }) {
 
 function useSwitchTheme() {
   const config = useChatStore((state) => state.config);
-  const screenWidth = window.innerWidth;
 
   useEffect(() => {
-    const metaDescription = document.querySelector('meta[name="theme-color"]');
-
     document.body.classList.remove("light");
     document.body.classList.remove("dark");
+
     if (config.theme === "dark") {
       document.body.classList.add("dark");
-      if (metaDescription) {
-        if (screenWidth < 600) {
-          metaDescription.setAttribute('content', "#1a262a");
-        } else {
-          metaDescription.setAttribute('content', "#151515");
-        }
-      }
     } else if (config.theme === "light") {
       document.body.classList.add("light");
-      if (metaDescription) {
-        if (screenWidth < 600) {
-          metaDescription.setAttribute('content', "#e7f8ff");
-        } else {
-          metaDescription.setAttribute('content', "#fafafa");
-        }
-      }
     }
-  }, [config.theme,screenWidth]);
+
+    const themeColor = getComputedStyle(document.body).getPropertyValue("--theme-color").trim();
+    const metaDescription = document.querySelector('meta[name="theme-color"]');
+    metaDescription?.setAttribute('content', themeColor);
+  }, [config.theme]);
 }
 
 function exportMessages(messages: Message[], topic: string) {

app/styles/globals.scss

@@ -7,6 +7,7 @@
   --second: rgb(231, 248, 255);
   --hover-color: #f3f3f3;
   --bar-color: rgba(0, 0, 0, 0.1);
+  --theme-color: var(--gray);
 
   /* shadow */
   --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
@@ -28,6 +29,8 @@
   --bar-color: rgba(255, 255, 255, 0.1);
 
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
+
+  --theme-color: var(--gray);
 }
 
 .light {
@@ -84,7 +87,11 @@ body {
   align-items: center;
   user-select: none;
   font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
-    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+
+  @media only screen and (max-width: 600px) {
+    background-color: var(--second);
+  }
 }
 
 ::-webkit-scrollbar {