From 9297f574f466ea5ef766c6421ee4bc6f9cafa3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 15 Jul 2024 22:45:38 +0800
Subject: [PATCH] =?UTF-8?q?enahcne(style):=E5=88=B7=E6=96=B0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=AE=9A=E4=B9=89=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/global-style.tsx | 50 +++++++++++++++++++++++++++-----------------
 src/theme.tsx        |  8 +++----
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/global-style.tsx b/src/global-style.tsx
index 210d8d0..37286a0 100644
--- a/src/global-style.tsx
+++ b/src/global-style.tsx
@@ -1,21 +1,33 @@
-import { css } from "@emotion/react";
+import { css, Theme } from "@emotion/react";
 import { mq } from "./style-predefines";
 
-export const globalStyle = (theme) =>
-  css({
-    [":root"]: {
-      colorScheme: "light dark",
-      fontFamily: "Inter, Avenir, Helvetica, Arial, sans-serif",
-      fontSize: 0.625,
-      fontSynthesis: "none",
-      textRendering: "optimizeLegibility",
-      WebkitFontSmoothing: "antialiased",
-      MozOsxFontSmoothing: "grayscale",
-      WebkitTextSizeAdjust: "100%",
-      backgroundColor: theme.backgroundColor.light,
-      overflow: "hidden",
-      [mq.dark]: {
-        backgroundColor: theme.backgroundColor.dark,
-      },
-    },
-  });
+export const globalStyle = (theme: Theme) => css`
+  :root {
+    color-scheme: light dark;
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 0.625;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+    color: ${theme.foregroundColor.light};
+    background-color: ${theme.backgroundColor.light};
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
+    ${mq.dark} {
+      color: ${theme.foregroundColor.dark};
+      background-color: ${theme.backgroundColor.dark};
+    }
+  }
+  body {
+    height: inherit;
+    width: inherit;
+    overflow: hidden;
+    #root {
+      height: inherit;
+      width: inherit;
+    }
+  }
+`;
diff --git a/src/theme.tsx b/src/theme.tsx
index e809333..67b592b 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -24,12 +24,12 @@ export const theme: Partial<Theme> = {
   white: "#ffffff",
   black: "#000000",
   foregroundColor: {
-    light: chroma.hsl(0, 0, 0.06).hex(),
-    dark: chroma.hsl(0, 0, 0.88).hex(),
+    light: chroma.hsl(0, 0, 0.12).hex(),
+    dark: chroma.hsl(0, 0, 0.82).hex(),
   },
   backgroundColor: {
-    light: chroma.hsl(0, 0, 0.96).hex(),
-    dark: chroma.hsl(0, 0, 0.18).hex(),
+    light: chroma.hsl(0, 0, 0.94).hex(),
+    dark: chroma.hsl(0, 0, 0.098).hex(),
   },
   successColor: {
     light: colors.green[5],