From b6235fd0585c03d914f78d9de6ea60d3bfc4e5ee Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 19 Sep 2021 21:49:31 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E4=BA=AE=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=9A=84=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E4=B8=8Eloading=E9=85=8D=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/routes/Main/Provider.tsx |  2 +-
 web/src/styles/global.less       | 31 ++++++++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/web/src/routes/Main/Provider.tsx b/web/src/routes/Main/Provider.tsx
index a3af2f52..c6a9654b 100644
--- a/web/src/routes/Main/Provider.tsx
+++ b/web/src/routes/Main/Provider.tsx
@@ -72,7 +72,7 @@ export const MainProvider: React.FC = React.memo((props) => {
 
   if (loading) {
     return (
-      <div className="fixed inset-0 flex items-center justify-center bg-content-light dark:bg-content-dark text-white text-xl">
+      <div className="fixed inset-0 flex items-center justify-center bg-content-light dark:bg-content-dark text-gray-700 dark:text-white text-xl">
         <LoadingSpinner tip={t('正在连接到聊天服务器...')} />
       </div>
     );
diff --git a/web/src/styles/global.less b/web/src/styles/global.less
index f21a78dc..0d491471 100644
--- a/web/src/styles/global.less
+++ b/web/src/styles/global.less
@@ -1,5 +1,5 @@
-.dark {
-  color: rgba(255,255,255,0.85);
+#tailchat-app {
+  @apply text-gray-700;
 
   /* 滚动条 */
   ::-webkit-scrollbar {
@@ -12,7 +12,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #202225;
+    @apply bg-black bg-opacity-10;
     border-color: transparent;
     background-clip: padding-box;
     border-width: 4px;
@@ -20,16 +20,37 @@
     border-radius: 8px;
 
     &:hover {
-      background-color: #202225;
+      @apply bg-black bg-opacity-20;
     }
   }
 
   ::-webkit-scrollbar-track {
-    background-color: #2f3136;
+    @apply bg-black bg-opacity-5;
     border-color: transparent;
     background-clip: padding-box;
     border-width: 4px;
     border-style: solid;
     border-radius: 8px;
   }
+
+  // 深色模式覆盖
+  &.dark {
+    color: rgba(255, 255, 255, 0.85);
+
+    ::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #202225;
+
+      &:hover {
+        background-color: #202225;
+      }
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: #2f3136;
+    }
+  }
 }