diff --git a/frontend/assets/css/chat.css b/frontend/assets/css/chat.css
index 862f9b2..e154e99 100644
--- a/frontend/assets/css/chat.css
+++ b/frontend/assets/css/chat.css
@@ -24,7 +24,7 @@
 
 .wechat-link-card.wechat-link-card--disabled:hover,
 .wechat-link-card-cover.wechat-link-card--disabled:hover {
-  background: #fff;
+  background: var(--merged-history-bg);
 }
 
 /* 滚动条样式 */
@@ -704,7 +704,7 @@
 /* 文件消息样式 - 基于红包样式覆盖 */
 .wechat-file-card {
   width: 210px;
-  background: #fff;
+  background: var(--merged-history-bg);
   cursor: pointer;
   transition: background-color 0.15s ease;
 }
@@ -728,11 +728,11 @@
   left: 13px;
   right: 13px;
   height: 1.5px;
-  background: #e8e8e8;
+  background: var(--merged-history-divider);
 }
 
 .wechat-file-card:hover {
-  background: #f5f5f5;
+  background: var(--merged-history-hover);
 }
 
 .wechat-file-card .wechat-file-info {
@@ -742,7 +742,7 @@
 
 .wechat-file-name {
   font-size: 14px;
-  color: #1a1a1a;
+  color: var(--merged-history-title);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -753,7 +753,7 @@
 
 .wechat-file-size {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--merged-history-footer);
   margin-top: 4px;
 }
 
@@ -765,12 +765,16 @@
 }
 
 .wechat-file-bottom {
-  border-top: 1px solid #e8e8e8;
+  border-top: 1px solid var(--merged-history-divider);
 }
 
 .wechat-file-bottom span {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--merged-history-footer);
+}
+
+.wechat-file-card :is(.text-gray-500, .text-gray-400) {
+  color: var(--merged-history-preview);
 }
 
 .wechat-file-logo {
@@ -785,7 +789,7 @@
   width: 210px;
   min-width: 210px;
   max-width: 210px;
-  background: #fff;
+  background: var(--merged-history-bg);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -798,7 +802,7 @@
 }
 
 .wechat-link-card:hover {
-  background: #f5f5f5;
+  background: var(--merged-history-hover);
 }
 
 .wechat-link-content {
@@ -819,7 +823,7 @@
 
 .wechat-link-title {
   font-size: 14px;
-  color: #1a1a1a;
+  color: var(--merged-history-title);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -830,7 +834,7 @@
 
 .wechat-link-desc {
   font-size: 12px;
-  color: #8c8c8c;
+  color: var(--merged-history-preview);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -847,7 +851,7 @@
   flex: 0 0 auto;
   border-radius: 0;
   overflow: hidden;
-  background: #f2f2f2;
+  background: var(--app-surface-muted);
   align-self: flex-start;
 }
 
@@ -905,7 +909,7 @@
 
 .wechat-link-mini-header-name {
   font-size: 13px;
-  color: #7d7d7d;
+  color: var(--merged-history-preview);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -916,7 +920,7 @@
 .wechat-link-mini-title {
   font-size: 13px;
   line-height: 1.45;
-  color: #1a1a1a;
+  color: var(--merged-history-title);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -930,12 +934,12 @@
   min-height: 0;
   flex: 1 1 auto;
   overflow: hidden;
-  background: #f2f2f2;
+  background: var(--app-surface-muted);
   margin-top: auto;
 }
 
 .wechat-link-mini-preview--empty {
-  background: #f7f7f7;
+  background: var(--app-surface-soft);
 }
 
 .wechat-link-mini-preview-img {
@@ -964,7 +968,7 @@
   left: 12px;
   right: 12px;
   height: 1px;
-  background: #e8e8e8;
+  background: var(--merged-history-divider);
 }
 
 .wechat-link-mini-footer-icon {
@@ -976,7 +980,7 @@
 
 .wechat-link-mini-footer-text {
   font-size: 10px;
-  color: #8c8c8c;
+  color: var(--merged-history-preview);
 }
 
 .wechat-link-from {
@@ -996,7 +1000,7 @@
   left: 11px;
   right: 11px;
   height: 1.5px;
-  background: #e8e8e8;
+  background: var(--merged-history-divider);
 }
 
 .wechat-link-from-avatar {
@@ -1024,7 +1028,7 @@
 
 .wechat-link-from-name {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--merged-history-footer);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1035,7 +1039,7 @@
   width: 137px;
   min-width: 137px;
   max-width: 137px;
-  background: #fff;
+  background: var(--merged-history-bg);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -1048,7 +1052,7 @@
 }
 
 .wechat-link-card-cover:hover {
-  background: #f5f5f5;
+  background: var(--merged-history-hover);
 }
 
 .wechat-link-cover-image-wrap {
@@ -1057,7 +1061,7 @@
   position: relative;
   overflow: hidden;
   border-radius: 4px 4px 0 0;
-  background: #f2f2f2;
+  background: var(--app-surface-muted);
   flex-shrink: 0;
 }
 
@@ -1126,7 +1130,7 @@
   box-sizing: border-box;
   font-size: 12px;
   line-height: 1.24;
-  color: #1a1a1a;
+  color: var(--merged-history-title);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index edd70fe..70994a1 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -1597,6 +1597,154 @@
     background-color: var(--search-panel-bg);
   }
 
+  .chat-overlay-dropdown,
+  .chat-context-menu,
+  .chat-floating-window,
+  .chat-edit-modal {
+    background-color: var(--app-surface-bg);
+    border: 1px solid var(--app-border);
+    color: var(--app-text-primary);
+    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
+  }
+
+  html[data-theme='dark'] :is(.chat-overlay-dropdown, .chat-context-menu, .chat-floating-window, .chat-edit-modal) {
+    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
+  }
+
+  .chat-overlay-dropdown input {
+    background-color: var(--app-input-bg);
+    border-color: var(--app-input-border);
+    color: var(--app-text-primary);
+  }
+
+  .chat-overlay-dropdown input::placeholder {
+    color: var(--app-text-muted);
+  }
+
+  .chat-overlay-dropdown :is(.bg-gray-200, .bg-gray-300),
+  .chat-floating-window :is(.bg-gray-200, .bg-gray-300) {
+    background-color: var(--app-border-soft);
+  }
+
+  .chat-overlay-dropdown :is(.border-gray-100, .border-gray-200, .border-gray-300),
+  .chat-floating-window :is(.border-gray-100, .border-gray-200, .border-gray-300) {
+    border-color: var(--app-border);
+  }
+
+  .chat-overlay-dropdown :is(.text-gray-900, .text-gray-800, .text-gray-700),
+  .chat-floating-window :is(.text-gray-900, .text-gray-800, .text-gray-700) {
+    color: var(--app-text-primary);
+  }
+
+  .chat-overlay-dropdown :is(.text-gray-600, .text-gray-500, .text-gray-400),
+  .chat-floating-window :is(.text-gray-600, .text-gray-500, .text-gray-400) {
+    color: var(--app-text-muted);
+  }
+
+  .chat-overlay-option {
+    color: var(--app-text-primary);
+    transition: background-color 0.15s ease;
+  }
+
+  .chat-overlay-option:hover {
+    background-color: var(--app-neutral-btn-hover);
+  }
+
+  .chat-overlay-option--active {
+    background-color: var(--app-surface-soft);
+  }
+
+  .chat-overlay-option--active:hover {
+    background-color: var(--app-neutral-btn-hover);
+  }
+
+  .chat-context-menu__item {
+    color: inherit;
+    transition: background-color 0.15s ease;
+  }
+
+  .chat-context-menu__item:hover {
+    background-color: var(--app-neutral-btn-hover);
+  }
+
+  .chat-context-menu :is(.border-gray-100, .border-gray-200, .border-gray-300) {
+    border-color: var(--app-border);
+  }
+
+  .chat-floating-window__header,
+  .chat-floating-window__body,
+  .chat-floating-window__row {
+    background-color: var(--app-surface-soft);
+  }
+
+  .chat-floating-window__header {
+    border-bottom: 1px solid var(--app-border);
+  }
+
+  .chat-floating-window__row {
+    border-bottom: 1px solid var(--app-border);
+  }
+
+  .chat-floating-window__title {
+    color: var(--app-text-primary);
+  }
+
+  .chat-floating-window__close {
+    color: var(--app-text-secondary);
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+
+  .chat-floating-window__close:hover {
+    background-color: var(--app-neutral-btn-hover);
+    color: var(--app-text-primary);
+  }
+
+  .chat-floating-window .bg-white {
+    background-color: var(--app-surface-bg);
+  }
+
+  .chat-floating-window .bg-gray-50 {
+    background-color: var(--app-surface-soft);
+  }
+
+  .chat-floating-window [class*='hover:bg-gray-50']:hover {
+    background-color: var(--app-neutral-btn-hover);
+  }
+
+  .chat-edit-modal :is(.border-gray-100, .border-gray-200, .border-gray-300) {
+    border-color: var(--app-border);
+  }
+
+  .chat-edit-modal .bg-white {
+    background-color: var(--app-surface-bg);
+  }
+
+  .chat-edit-modal .bg-gray-50 {
+    background-color: var(--app-surface-soft);
+  }
+
+  .chat-edit-modal :is(.text-gray-900, .text-gray-800, .text-gray-700) {
+    color: var(--app-text-primary);
+  }
+
+  .chat-edit-modal :is(.text-gray-600, .text-gray-500, .text-gray-400) {
+    color: var(--app-text-muted);
+  }
+
+  .chat-edit-modal :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
+    background-color: var(--app-input-bg);
+    border-color: var(--app-input-border);
+    color: var(--app-text-primary);
+  }
+
+  .chat-edit-modal :is(input:not([type='checkbox']):not([type='radio']), textarea, select)::placeholder {
+    color: var(--app-text-muted);
+  }
+
+  .chat-edit-modal [class*='hover:bg-gray-50']:hover {
+    background-color: var(--app-neutral-btn-hover);
+  }
+
   .search-input-combined {
     background-color: var(--search-input-bg);
     border-color: var(--search-input-border);
diff --git a/frontend/components/ChatLocationCard.vue b/frontend/components/ChatLocationCard.vue
index 83a77c6..1b9c0d2 100644
--- a/frontend/components/ChatLocationCard.vue
+++ b/frontend/components/ChatLocationCard.vue
@@ -267,4 +267,10 @@ const openLocation = () => {
   width: 100%;
   height: 100%;
 }
+
+html[data-theme='dark'] .wechat-location-card-wrap {
+  --location-card-bg: var(--merged-history-bg);
+  --location-card-text: var(--merged-history-title);
+  --location-card-muted: var(--merged-history-preview);
+}
 </style>
diff --git a/frontend/components/chat/ChatOverlays.vue b/frontend/components/chat/ChatOverlays.vue
index 98f6131..d11d4bc 100644
--- a/frontend/components/chat/ChatOverlays.vue
+++ b/frontend/components/chat/ChatOverlays.vue
@@ -258,7 +258,7 @@
 
                 <div
                   v-if="messageSearchSenderDropdownOpen"
-                  class="absolute left-0 right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-50 overflow-hidden"
+                  class="chat-overlay-dropdown absolute left-0 right-0 mt-1 rounded-md z-50 overflow-hidden"
                 >
                   <div class="p-2 border-b border-gray-100">
                     <input
@@ -274,8 +274,8 @@
                   <div class="max-h-64 overflow-y-auto">
                     <button
                       type="button"
-                      class="w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-gray-50"
-                      :class="!messageSearchSender ? 'bg-gray-50' : ''"
+                      class="chat-overlay-option w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs"
+                      :class="!messageSearchSender ? 'chat-overlay-option--active' : ''"
                       @click="selectMessageSearchSender('')"
                     >
                       <span class="w-6 h-6 rounded-md overflow-hidden bg-gray-200 flex-shrink-0 flex items-center justify-center text-[10px] text-gray-500">
@@ -298,8 +298,8 @@
                         v-for="s in filteredMessageSearchSenderOptions"
                         :key="s.username"
                         type="button"
-                        class="w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-gray-50"
-                        :class="messageSearchSender === s.username ? 'bg-gray-50' : ''"
+                        class="chat-overlay-option w-full flex items-center gap-2 px-2 py-1.5 text-left text-xs"
+                        :class="messageSearchSender === s.username ? 'chat-overlay-option--active' : ''"
                         @click="selectMessageSearchSender(s.username)"
                       >
                         <div class="w-6 h-6 rounded-md overflow-hidden bg-gray-300 flex-shrink-0" :class="{ 'privacy-blur': privacyMode }">
@@ -560,29 +560,29 @@
       @mousedown="focusFloatingWindow(win.id)"
     >
       <div
-        class="bg-[#f7f7f7] rounded-xl shadow-xl overflow-hidden border border-gray-200 flex flex-col"
+        class="chat-floating-window rounded-xl overflow-hidden flex flex-col"
         :style="{ width: win.width + 'px', height: win.height + 'px' }"
       >
         <div
-          class="px-3 py-2 bg-[#f7f7f7] border-b border-gray-200 flex items-center justify-between select-none cursor-move"
+          class="chat-floating-window__header px-3 py-2 flex items-center justify-between select-none cursor-move"
           @mousedown.stop="startFloatingWindowDrag(win.id, $event)"
           @touchstart.stop="startFloatingWindowDrag(win.id, $event)"
         >
-          <div class="text-sm text-[#161616] truncate min-w-0">{{ win.title || (win.kind === 'link' ? '链接' : '聊天记录') }}</div>
+          <div class="chat-floating-window__title text-sm truncate min-w-0">{{ win.title || (win.kind === 'link' ? '链接' : '聊天记录') }}</div>
           <button
             type="button"
-            class="p-2 rounded hover:bg-black/5 flex-shrink-0"
+            class="chat-floating-window__close p-2 rounded flex-shrink-0"
             @click.stop="closeFloatingWindow(win.id)"
             aria-label="关闭"
             title="关闭"
           >
-            <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
             </svg>
           </button>
         </div>
 
-        <div class="flex-1 overflow-auto bg-[#f7f7f7]">
+        <div class="chat-floating-window__body flex-1 overflow-auto">
           <!-- Chat history window -->
           <template v-if="win.kind === 'chatHistory'">
             <div v-if="win.loading" class="text-xs text-gray-500 text-center py-2">加载中...</div>
@@ -593,7 +593,7 @@
               <div
                 v-for="(rec, idx) in win.records"
                 :key="rec.id || idx"
-                class="px-4 py-3 flex gap-3 border-b border-gray-100 bg-[#f7f7f7]"
+                class="chat-floating-window__row px-4 py-3 flex gap-3"
               >
                 <div class="w-9 h-9 rounded-md overflow-hidden bg-gray-200 flex-shrink-0" :class="{ 'privacy-blur': privacyMode }">
                   <img
@@ -1087,19 +1087,19 @@
     <div
       v-if="contextMenu.visible"
       ref="contextMenuElement"
-      class="fixed z-[12000] max-h-[calc(100vh-16px)] overflow-y-auto bg-white border border-gray-200 rounded-md shadow-lg text-sm"
+      class="chat-context-menu fixed z-[12000] max-h-[calc(100vh-16px)] overflow-y-auto rounded-md text-sm"
       :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
       @click.stop
     >
       <button
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100"
+        class="chat-context-menu__item block w-full text-left px-3 py-2"
         type="button"
         @click="onCopyMessageTextClick"
       >
         复制文本
       </button>
       <button
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100"
+        class="chat-context-menu__item block w-full text-left px-3 py-2"
         type="button"
         @click="onCopyMessageJsonClick"
       >
@@ -1107,14 +1107,14 @@
       </button>
       <button
         v-if="contextMenu.message?.renderType === 'quote' && contextMenu.message?.quoteServerId"
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100"
+        class="chat-context-menu__item block w-full text-left px-3 py-2"
         type="button"
         @click="onLocateQuotedMessageClick"
       >
         定位引用消息
       </button>
       <button
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100"
+        class="chat-context-menu__item block w-full text-left px-3 py-2"
         type="button"
         :disabled="contextMenu.disabled"
         :class="contextMenu.disabled ? 'opacity-50 cursor-not-allowed' : ''"
@@ -1127,7 +1127,7 @@
 
       <button
         v-if="contextMenu.message?.id"
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100"
+        class="chat-context-menu__item block w-full text-left px-3 py-2"
         type="button"
         @click="onEditMessageClick"
       >
@@ -1135,7 +1135,7 @@
       </button>
       <button
         v-if="contextMenu.message?.id"
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100"
+        class="chat-context-menu__item block w-full text-left px-3 py-2"
         type="button"
         @click="onEditMessageFieldsClick"
       >
@@ -1143,7 +1143,7 @@
       </button>
       <button
         v-if="contextMenu.editStatus?.modified"
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100 text-red-600"
+        class="chat-context-menu__item block w-full text-left px-3 py-2 text-red-600"
         type="button"
         @click="onResetEditedMessageClick"
       >
@@ -1151,7 +1151,7 @@
       </button>
       <button
         v-if="contextMenu.message?.id"
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100"
+        class="chat-context-menu__item block w-full text-left px-3 py-2"
         type="button"
         @click="onRepairMessageSenderAsMeClick"
       >
@@ -1159,7 +1159,7 @@
       </button>
       <button
         v-if="contextMenu.message?.id"
-        class="block w-full text-left px-3 py-2 hover:bg-gray-100 text-orange-600"
+        class="chat-context-menu__item block w-full text-left px-3 py-2 text-orange-600"
         type="button"
         @click="onFlipWechatMessageDirectionClick"
       >
@@ -1171,7 +1171,7 @@
     <!-- 修改消息弹窗 -->
     <div v-if="messageEditModal.open" class="fixed inset-0 z-[11000] flex items-center justify-center">
       <div class="absolute inset-0 bg-black/40" @click="closeMessageEditModal"></div>
-      <div class="relative w-[860px] max-w-[95vw] bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden">
+      <div class="chat-edit-modal relative w-[860px] max-w-[95vw] rounded-lg overflow-hidden">
         <div class="px-5 py-4 border-b border-gray-200 flex items-center">
           <div class="text-base font-medium text-gray-900">{{ messageEditModal.mode === 'content' ? '修改消息' : '编辑源码' }}</div>
           <button class="ml-auto text-gray-400 hover:text-gray-600" type="button" @click="closeMessageEditModal">
@@ -1218,7 +1218,7 @@
     <!-- 字段编辑弹窗 -->
     <div v-if="messageFieldsModal.open" class="fixed inset-0 z-[11000] flex items-center justify-center">
       <div class="absolute inset-0 bg-black/40" @click="closeMessageFieldsModal"></div>
-      <div class="relative w-[920px] max-w-[95vw] bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden">
+      <div class="chat-edit-modal relative w-[920px] max-w-[95vw] rounded-lg overflow-hidden">
         <div class="px-5 py-4 border-b border-gray-200 flex items-center">
           <div class="text-base font-medium text-gray-900">字段编辑</div>
           <button class="ml-auto text-gray-400 hover:text-gray-600" type="button" @click="closeMessageFieldsModal">
diff --git a/frontend/components/chat/LinkCard.vue b/frontend/components/chat/LinkCard.vue
index 4ed3c0a..a231804 100644
--- a/frontend/components/chat/LinkCard.vue
+++ b/frontend/components/chat/LinkCard.vue
@@ -116,7 +116,7 @@ export default defineComponent({
               flexDirection: 'column',
               boxSizing: 'border-box',
               flex: '0 0 auto',
-              background: '#fff',
+              background: 'var(--merged-history-bg)',
               border: 'none',
               boxShadow: 'none',
               textDecoration: 'none',
@@ -167,7 +167,7 @@ export default defineComponent({
               flexDirection: 'column',
               boxSizing: 'border-box',
               flex: '0 0 auto',
-              background: '#fff',
+              background: 'var(--merged-history-bg)',
               border: 'none',
               boxShadow: 'none',
               textDecoration: 'none',
@@ -236,7 +236,7 @@ export default defineComponent({
             flexDirection: 'column',
             boxSizing: 'border-box',
             flex: '0 0 auto',
-            background: '#fff',
+            background: 'var(--merged-history-bg)',
             border: 'none',
             boxShadow: 'none',
             textDecoration: 'none',
diff --git a/frontend/components/chat/MessageItem.vue b/frontend/components/chat/MessageItem.vue
index 0a5fa39..cab78d9 100644
--- a/frontend/components/chat/MessageItem.vue
+++ b/frontend/components/chat/MessageItem.vue
@@ -49,7 +49,7 @@
 
           <div
             v-if="contactProfileCardOpen && contactProfileCardMessageId === String(message.id ?? '')"
-            class="absolute z-40 w-[360px] max-w-[88vw] bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden"
+            class="chat-contact-card absolute z-40 w-[360px] max-w-[88vw] rounded-lg overflow-hidden"
             :class="message.isSent ? 'right-0 top-[calc(100%+8px)]' : 'left-0 top-[calc(100%+8px)]'"
             @mouseenter="onContactCardMouseEnter"
             @mouseleave="onMessageAvatarMouseLeave"
@@ -146,3 +146,40 @@ export default defineComponent({
   }
 })
 </script>
+
+<style scoped>
+.chat-contact-card {
+  background-color: var(--app-surface-bg);
+  border: 1px solid var(--app-border);
+  color: var(--app-text-primary);
+  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
+}
+
+html[data-theme='dark'] .chat-contact-card {
+  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
+}
+
+.chat-contact-card .bg-white {
+  background-color: var(--app-surface-bg);
+}
+
+.chat-contact-card [class*='bg-[#F6F6F6]'] {
+  background-color: var(--app-surface-soft);
+}
+
+.chat-contact-card .bg-gray-200 {
+  background-color: var(--app-border-soft);
+}
+
+.chat-contact-card :is(.border-gray-100, .border-gray-200, .border-gray-300) {
+  border-color: var(--app-border);
+}
+
+.chat-contact-card :is(.text-gray-900, .text-gray-800, .text-gray-700) {
+  color: var(--app-text-primary);
+}
+
+.chat-contact-card :is(.text-gray-600, .text-gray-500, .text-gray-400) {
+  color: var(--app-text-muted);
+}
+</style>