From 9d9c83a72ca6b6a8e77200737a11df05794cd5f0 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sat, 25 Apr 2026 11:31:16 +0800
Subject: [PATCH] refactor: update styling for chat components to enhance
 visual consistency and accessibility

---
 web/components/kefu/chat-shell.tsx        | 62 ++++++++++++++++++-----
 web/components/kefu/connection-status.tsx |  8 +--
 web/components/kefu/message-editor.tsx    | 12 ++---
 web/components/kefu/message-list.tsx      | 16 +++---
 4 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/web/components/kefu/chat-shell.tsx b/web/components/kefu/chat-shell.tsx
index b16f975..8b723be 100644
--- a/web/components/kefu/chat-shell.tsx
+++ b/web/components/kefu/chat-shell.tsx
@@ -7,7 +7,14 @@ import {
   RotateCwIcon,
   XIcon,
 } from "lucide-react"
-import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react"
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react"
 import { useShallow } from "zustand/react/shallow"
 
 import { KefuConnectionStatus } from "@/components/kefu/connection-status"
@@ -33,7 +40,36 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 
+function useKefuSystemTheme() {
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") {
+      return
+    }
+    const root = document.documentElement
+    const query = window.matchMedia("(prefers-color-scheme: dark)")
+    const previousDarkClass = root.classList.contains("dark")
+    const previousColorScheme = root.style.colorScheme
+
+    const syncTheme = () => {
+      const isDark = query.matches
+      root.classList.toggle("dark", isDark)
+      root.style.colorScheme = isDark ? "dark" : "light"
+    }
+
+    syncTheme()
+    query.addEventListener("change", syncTheme)
+
+    return () => {
+      query.removeEventListener("change", syncTheme)
+      root.classList.toggle("dark", previousDarkClass)
+      root.style.colorScheme = previousColorScheme
+    }
+  }, [])
+}
+
 export function KefuChatShell() {
+  useKefuSystemTheme()
+
   const messageListRef = useRef<KefuMessageListHandle | null>(null)
   const [isMaximized, setIsMaximized] = useState(false)
   const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false)
@@ -200,23 +236,23 @@ export function KefuChatShell() {
 
   return (
     <main
-      className="relative flex h-screen overflow-hidden bg-[#f6f8fb] text-slate-950"
+      className="relative flex h-screen overflow-hidden bg-muted text-foreground"
       style={{ "--primary": themeColor } as CSSProperties}
     >
-      <section className="flex h-full w-full flex-col overflow-hidden border border-slate-200/70 bg-white">
-        <header className="shrink-0 border-b border-slate-200/70 bg-white/95 px-4 py-3 shadow-[0_8px_24px_rgba(15,23,42,0.04)]">
+      <section className="flex h-full w-full flex-col overflow-hidden border border-border bg-card text-card-foreground">
+        <header className="shrink-0 border-b border-border bg-card/95 px-4 py-3 shadow-[0_8px_24px_rgba(15,23,42,0.04)] dark:shadow-none">
           <div className="flex items-center justify-between gap-3">
             <div className="min-w-0">
-              <div className="truncate text-base font-semibold text-slate-950">
+              <div className="truncate text-base font-semibold text-foreground">
                 {title}
               </div>
-              <div className="mt-1 truncate text-xs text-slate-500">{subtitle}</div>
+              <div className="mt-1 truncate text-xs text-muted-foreground">{subtitle}</div>
             </div>
             <div className="flex items-center gap-2">
               {status !== "connected" ? (
                 <KefuConnectionStatus status={status} />
               ) : null}
-              <div className="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-slate-50 p-1">
+              <div className="inline-flex items-center gap-1 rounded-lg border border-border bg-muted/60 p-1">
                 <Button
                   type="button"
                   variant="ghost"
@@ -224,7 +260,7 @@ export function KefuChatShell() {
                   onClick={retry}
                   aria-label="重新连接"
                   title="重新连接"
-                  className="text-slate-500 hover:bg-white hover:text-sky-600"
+                  className="text-muted-foreground hover:bg-background hover:text-sky-600 dark:hover:text-sky-400"
                 >
                   <RotateCwIcon />
                 </Button>
@@ -236,7 +272,7 @@ export function KefuChatShell() {
                     onClick={handleMinimize}
                     aria-label="收起聊天窗口"
                     title="收起聊天窗口"
-                    className="text-slate-500 hover:bg-white hover:text-slate-800"
+                    className="text-muted-foreground hover:bg-background hover:text-foreground"
                   >
                     <MinusIcon />
                   </Button>
@@ -249,7 +285,7 @@ export function KefuChatShell() {
                     onClick={handleToggleMaximize}
                     aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
                     title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
-                    className="text-slate-500 hover:bg-white hover:text-emerald-700"
+                    className="text-muted-foreground hover:bg-background hover:text-emerald-700 dark:hover:text-emerald-400"
                   >
                     {isMaximized ? (
                       <Minimize2Icon />
@@ -265,7 +301,7 @@ export function KefuChatShell() {
                   onClick={() => setIsCloseDialogOpen(true)}
                   aria-label="关闭聊天窗口"
                   title="关闭聊天窗口"
-                  className="text-rose-500 hover:bg-rose-50 hover:text-rose-600"
+                  className="text-rose-500 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-300"
                 >
                   <XIcon />
                 </Button>
@@ -274,7 +310,7 @@ export function KefuChatShell() {
           </div>
         </header>
 
-        <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden bg-[#f6f8fb]">
+        <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden bg-muted/70">
           <KefuMessageList
             ref={messageListRef}
             messages={safeMessages}
@@ -292,7 +328,7 @@ export function KefuChatShell() {
         </div>
 
         {error ? (
-          <div className="border-t border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+          <div className="border-t border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
             {error}
           </div>
         ) : null}
diff --git a/web/components/kefu/connection-status.tsx b/web/components/kefu/connection-status.tsx
index a27811f..c2c338f 100644
--- a/web/components/kefu/connection-status.tsx
+++ b/web/components/kefu/connection-status.tsx
@@ -16,10 +16,10 @@ const statusText: Record<KefuConnectionStatusProps["status"], string> = {
 export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
   const toneClass =
     status === "connected"
-      ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+      ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300"
       : status === "connecting"
-        ? "border-amber-200 bg-amber-50 text-amber-700"
-        : "border-slate-200 bg-slate-100 text-slate-600"
+        ? "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/70 dark:bg-amber-950/50 dark:text-amber-300"
+        : "border-border bg-muted text-muted-foreground"
 
   return (
     <Badge
@@ -33,7 +33,7 @@ export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
             ? "bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.14)]"
             : status === "connecting"
               ? "bg-amber-500 shadow-[0_0_0_4px_rgba(245,158,11,0.16)]"
-              : "bg-slate-400 shadow-[0_0_0_4px_rgba(148,163,184,0.14)]"
+              : "bg-muted-foreground shadow-[0_0_0_4px_rgba(148,163,184,0.14)]"
         )}
       />
       <span>{statusText[status]}</span>
diff --git a/web/components/kefu/message-editor.tsx b/web/components/kefu/message-editor.tsx
index d40b077..3a6e5be 100644
--- a/web/components/kefu/message-editor.tsx
+++ b/web/components/kefu/message-editor.tsx
@@ -100,7 +100,7 @@ export function KefuMessageEditor({
     editorProps: {
       attributes: {
         class:
-          "min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-slate-900 outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-lg [&_img]:object-contain",
+          "min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-lg [&_img]:object-contain",
       },
       handleKeyDown: (_view, event) => {
         if (event.key === "Enter" && !event.shiftKey) {
@@ -233,8 +233,8 @@ export function KefuMessageEditor({
   }
 
   return (
-    <div className="border-t border-slate-200/70 bg-white px-3 pb-3 pt-2">
-      <div className="rounded-xl border border-slate-200 bg-white p-2 shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
+    <div className="border-t border-border bg-card px-3 pb-3 pt-2">
+      <div className="rounded-xl border border-border bg-background p-2 shadow-[0_8px_24px_rgba(15,23,42,0.05)] dark:shadow-none">
         <input
           ref={imageInputRef}
           type="file"
@@ -265,7 +265,7 @@ export function KefuMessageEditor({
               disabled={disabled || isUploading}
               aria-label={isUploading ? "图片上传中" : "发送图片"}
               title={isUploading ? "图片上传中" : "发送图片"}
-              className="text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+              className="text-muted-foreground hover:bg-muted hover:text-foreground"
             >
               <ImageIcon />
             </Button>
@@ -281,13 +281,13 @@ export function KefuMessageEditor({
               disabled={disabled || isUploading}
               aria-label={isUploading ? "附件上传中" : "发送附件"}
               title={isUploading ? "附件上传中" : "发送附件"}
-              className="text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+              className="text-muted-foreground hover:bg-muted hover:text-foreground"
             >
               <PaperclipIcon />
             </Button>
           </div>
           <div className="flex items-center gap-2">
-            <p className="text-[10px] text-slate-400">Enter 发送</p>
+            <p className="text-[10px] text-muted-foreground">Enter 发送</p>
             <Button
               type="button"
               size="icon"
diff --git a/web/components/kefu/message-list.tsx b/web/components/kefu/message-list.tsx
index 645e991..6b54437 100644
--- a/web/components/kefu/message-list.tsx
+++ b/web/components/kefu/message-list.tsx
@@ -219,7 +219,7 @@ export const KefuMessageList = forwardRef<KefuMessageListHandle, KefuMessageList
                 size="sm"
                 disabled={loadingOlder}
                 onClick={() => void handleLoadOlder()}
-                className="h-7 rounded-full border-slate-200 bg-white/90 text-xs text-slate-600 shadow-sm hover:bg-white hover:text-sky-700"
+                className="h-7 rounded-full bg-background/90 text-xs text-muted-foreground shadow-sm hover:bg-background hover:text-sky-700 dark:hover:text-sky-400"
               >
                 {loadingOlder ? "加载中…" : "加载更早的消息"}
               </Button>
@@ -269,7 +269,7 @@ const MessageItem = memo(
           <div className="mb-3 flex items-center justify-center">
             <Badge
               variant="outline"
-              className="border-slate-200 bg-white/85 text-[11px] font-medium text-slate-500 shadow-sm"
+              className="border-border bg-background/85 text-[11px] font-medium text-muted-foreground shadow-sm"
             >
               {getTimelineLabel(message.sentAt)}
             </Badge>
@@ -280,7 +280,7 @@ const MessageItem = memo(
           {!isCustomer ? (
             <Avatar className="mt-5">
               {avatarSrc ? <AvatarImage src={avatarSrc} alt="" /> : null}
-              <AvatarFallback className="bg-slate-200 text-slate-600">
+              <AvatarFallback className="bg-muted text-muted-foreground">
                 {fallbackName || "客"}
               </AvatarFallback>
             </Avatar>
@@ -292,7 +292,7 @@ const MessageItem = memo(
               isCustomer ? "items-end" : "items-start"
             )}
           >
-            <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-slate-400">
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-muted-foreground">
               <span className="font-medium">{senderName}</span>
               <span>{formatDateTime(message.sentAt)}</span>
               {isCustomer ? (
@@ -303,16 +303,16 @@ const MessageItem = memo(
               className={cn(
                 "rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_10px_22px_rgba(15,23,42,0.06)]",
                 isCustomer
-                  ? "bg-[#a9ea7a] text-[#161616]"
-                  : "border border-slate-200/80 bg-white text-slate-900"
+                  ? "bg-[#a9ea7a] text-[#161616] dark:bg-emerald-500 dark:text-emerald-950"
+                  : "border border-border bg-card text-card-foreground dark:bg-background"
               )}
             >
               <ImMessageHTML
                 html={htmlContent}
                 className={cn(
                   isCustomer
-                    ? "[&_p]:text-[#161616] [&_a]:text-[#161616] [&_a]:underline [&_img]:cursor-zoom-in"
-                    : "[&_a]:text-slate-900 [&_a]:underline [&_img]:cursor-zoom-in"
+                    ? "[&_p]:text-[#161616] dark:[&_p]:text-emerald-950 [&_a]:text-[#161616] dark:[&_a]:text-emerald-950 [&_a]:underline [&_img]:cursor-zoom-in"
+                    : "[&_a]:text-card-foreground [&_a]:underline [&_img]:cursor-zoom-in"
                 )}
                 onImageSettled={onImageSettled}
                 onImageClick={open}