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;
+    }
+  }
 }