diff --git a/docs/demos/attachments/custom-file-type.vue b/docs/demos/attachments/custom-file-type.vue
index 69c81391e..aed8e48f0 100644
--- a/docs/demos/attachments/custom-file-type.vue
+++ b/docs/demos/attachments/custom-file-type.vue
@@ -116,6 +116,5 @@ const handleFileChange = (event: Event) => {
 .demo-section h4 {
   margin-top: 0;
   margin-bottom: 16px;
-  color: #333;
 }
 </style>
diff --git a/packages/components/src/attachments/components/FileCard.vue b/packages/components/src/attachments/components/FileCard.vue
index 56d417e7c..b4e59a3e7 100644
--- a/packages/components/src/attachments/components/FileCard.vue
+++ b/packages/components/src/attachments/components/FileCard.vue
@@ -193,10 +193,13 @@ const cardClasses = computed(() => {
     border-radius: 8px;
     margin-right: 8px;
     margin-bottom: 8px;
-    transition: all 0.3s ease;
+    transition:
+      background-color 0.3s ease,
+      border-color 0.3s ease,
+      box-shadow 0.3s ease;
     box-sizing: border-box;
-    background: rgb(255, 255, 255);
-    border: 1px solid rgb(240, 240, 240);
+    background: var(--tr-attachments-card-bg);
+    border: 1px solid var(--tr-attachments-card-border-color);
   }
 
   // 默认卡片样式
@@ -208,8 +211,9 @@ const cardClasses = computed(() => {
     padding: 8px 12px 8px 8px;
 
     &:hover {
-      background: rgb(255, 255, 255);
-      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+      background: var(--tr-attachments-card-hover-bg);
+      border-color: var(--tr-attachments-card-hover-border-color);
+      box-shadow: var(--tr-attachments-card-hover-shadow);
     }
   }
 
@@ -223,7 +227,7 @@ const cardClasses = computed(() => {
 
   &--uploading {
     .tr-file-card__status {
-      color: #808080;
+      color: var(--tr-attachments-meta-color);
     }
   }
 
@@ -234,10 +238,21 @@ const cardClasses = computed(() => {
     z-index: 20;
     border: none;
     background: transparent;
+    color: var(--tr-attachments-close-icon-color);
     cursor: pointer;
     border-radius: 50%;
-    transition: opacity 0.2s;
+    transition:
+      opacity 0.2s ease,
+      color 0.2s ease;
     opacity: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    &:hover {
+      color: var(--tr-attachments-close-icon-hover-color);
+    }
 
     // 悬浮时显示
     .tr-file-card:hover &,
@@ -273,8 +288,8 @@ const cardClasses = computed(() => {
     width: 100%;
     height: 100%;
     border-radius: inherit;
-    background-color: rgba(0, 0, 0, 0.4);
-    color: white;
+    background-color: var(--tr-attachments-status-overlay-bg);
+    color: var(--tr-attachments-picture-overlay-color);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -351,12 +366,12 @@ const cardClasses = computed(() => {
 
     // 卡片模式
     &--icon {
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: var(--tr-attachments-status-overlay-bg);
     }
 
     // 图片模式
     &--picture {
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: var(--tr-attachments-status-overlay-bg);
       z-index: 2;
     }
   }
@@ -375,12 +390,12 @@ const cardClasses = computed(() => {
         height: 17px;
         text-align: center;
         font-size: 12px;
-        color: #fff;
+        color: var(--tr-attachments-loading-text-color);
       }
     }
 
     &--error {
-      color: #ffffff;
+      color: #fff;
     }
   }
 
@@ -407,7 +422,7 @@ const cardClasses = computed(() => {
     font-size: 12px;
     font-weight: 400;
     line-height: 18px;
-    color: rgb(25, 25, 25);
+    color: var(--tr-attachments-title-color);
 
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -421,7 +436,7 @@ const cardClasses = computed(() => {
     font-size: 12px;
     font-weight: 400;
     line-height: 18px;
-    color: rgb(128, 128, 128);
+    color: var(--tr-attachments-meta-color);
 
     // 成功状态容器
     &-success {
@@ -483,22 +498,22 @@ const cardClasses = computed(() => {
   }
 
   &__file-type {
-    color: rgb(128, 128, 128);
+    color: var(--tr-attachments-meta-color);
   }
 
   &__file-size {
-    color: rgb(128, 128, 128);
+    color: var(--tr-attachments-meta-color);
   }
 
   // 上传中文本
   &__uploading-text {
-    color: rgb(128, 128, 128);
+    color: var(--tr-attachments-meta-color);
     font-size: 12px;
   }
 
   // 错误文本
   &__error-text {
-    color: #f23030;
+    color: var(--tr-attachments-error-color);
     font-size: 12px;
   }
 
@@ -506,7 +521,7 @@ const cardClasses = computed(() => {
   &__retry-btn {
     background: transparent;
     border: none;
-    color: #1476ff;
+    color: var(--tr-attachments-retry-color);
     cursor: pointer;
     font-size: 12px;
     padding: 2px 6px;
@@ -514,29 +529,37 @@ const cardClasses = computed(() => {
     transition: all 0.2s ease;
 
     &:hover {
-      background-color: rgba(20, 118, 255, 0.05);
+      background-color: var(--tr-attachments-retry-hover-bg);
     }
   }
 
   &__action-btn {
-    height: 18px;
-    border: none;
-    background: transparent;
-    color: #616161;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    font-size: 12px;
+    display: flex;
+    align-items: center;
 
-    &--preview,
-    &--download {
-      color: rgb(20, 118, 255);
+    > a,
+    > button {
+      height: 18px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: var(--tr-attachments-action-color);
+      cursor: pointer;
+      border-radius: 4px;
+      transition:
+        color 0.2s ease,
+        background-color 0.2s ease;
+      white-space: nowrap;
       font-size: 12px;
+      line-height: 18px;
+      text-decoration: none;
+    }
 
+    &--preview,
+    &--download {
       &:hover {
-        color: #1476ff;
-        background-color: rgba(0, 0, 0, 0.04);
+        color: var(--tr-attachments-action-hover-color);
+        background-color: var(--tr-attachments-action-hover-bg);
       }
     }
   }
diff --git a/packages/components/src/attachments/index.vue b/packages/components/src/attachments/index.vue
index fea438a6f..8ff809d71 100644
--- a/packages/components/src/attachments/index.vue
+++ b/packages/components/src/attachments/index.vue
@@ -105,7 +105,7 @@ watch(
 .tr-attachments {
   position: relative;
   border-radius: 8px;
-  color: rgb(25, 25, 25);
+  color: var(--tr-attachments-title-color);
 
   // 文件列表容器
   &__file-list {
diff --git a/packages/components/src/styles/variables.css b/packages/components/src/styles/variables.css
index 5e1b83b15..c8ab0127c 100644
--- a/packages/components/src/styles/variables.css
+++ b/packages/components/src/styles/variables.css
@@ -109,6 +109,26 @@
   --tr-container-bg-active: rgba(0, 0, 0, 0.15);
   --tr-container-bg-disabled: rgba(0, 0, 0, 0.04);
 
+  /* ===== Attachments ===== */
+  --tr-attachments-card-bg: #ffffff;
+  --tr-attachments-card-border-color: #f0f0f0;
+  --tr-attachments-card-hover-bg: #ffffff;
+  --tr-attachments-card-hover-border-color: #f0f0f0;
+  --tr-attachments-card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --tr-attachments-title-color: var(--tr-text-primary);
+  --tr-attachments-meta-color: var(--tr-text-tertiary);
+  --tr-attachments-action-color: var(--tr-color-primary);
+  --tr-attachments-action-hover-color: var(--tr-color-primary);
+  --tr-attachments-action-hover-bg: transparent;
+  --tr-attachments-retry-color: var(--tr-color-primary);
+  --tr-attachments-retry-hover-bg: rgba(20, 118, 255, 0.05);
+  --tr-attachments-close-icon-color: #c2c2c2;
+  --tr-attachments-close-icon-hover-color: var(--tr-text-primary);
+  --tr-attachments-status-overlay-bg: rgba(0, 0, 0, 0.4);
+  --tr-attachments-picture-overlay-color: #ffffff;
+  --tr-attachments-error-color:  var(--tr-color-error);
+  --tr-attachments-loading-text-color: #ffffff;
+
   /* ===== MCP Server Picker ===== */
   --tr-mcp-server-picker-bg-default: #ffffff;
   --tr-mcp-server-picker-bg-default-2: #ffffff;
@@ -234,6 +254,26 @@
   --tr-container-bg-active: rgba(255, 255, 255, 0.15);
   --tr-container-bg-disabled: rgba(255, 255, 255, 0.06);
 
+  /* ===== Attachments ===== */
+  --tr-attachments-card-bg: transparent;
+  --tr-attachments-card-border-color: rgba(255, 255, 255, 0.15);
+  --tr-attachments-card-hover-bg: rgba(255, 255, 255, 0.05);
+  --tr-attachments-card-hover-border-color: transparent;
+  --tr-attachments-card-hover-shadow: none;
+  --tr-attachments-title-color: var(--tr-text-primary);
+  --tr-attachments-meta-color: var(--tr-text-tertiary);
+  --tr-attachments-action-color: var(--tr-color-primary);
+  --tr-attachments-action-hover-color: var(--tr-color-primary);
+  --tr-attachments-action-hover-bg: transparent;
+  --tr-attachments-retry-color: var(--tr-color-primary);
+  --tr-attachments-retry-hover-bg: rgba(82, 145, 255, 0.12);
+  --tr-attachments-close-icon-color: #4d4d4d;
+  --tr-attachments-close-icon-hover-color: var(--tr-text-primary);
+  --tr-attachments-status-overlay-bg: rgba(0, 0, 0, 0.4);
+  --tr-attachments-picture-overlay-color: #ffffff;
+  --tr-attachments-error-color:  var(--tr-color-error);
+  --tr-attachments-loading-text-color: #ffffff;
+
   /* ===== 阴影系统 ===== */
   --tr-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.48);
   --tr-shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
diff --git a/packages/svgs/src/assets/file-remove.svg b/packages/svgs/src/assets/file-remove.svg
index b4cefcf9d..e62929b0a 100644
--- a/packages/svgs/src/assets/file-remove.svg
+++ b/packages/svgs/src/assets/file-remove.svg
@@ -1,5 +1,5 @@
 <svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<path id="路径" d="M8 1C4.13 1 1 4.13 1 8C1 11.86 4.13 15 8 15C11.86 15 15 11.86 15 8C15 4.13 11.86 1 8 1Z" fill="#C2C2C2" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="路径" d="M8 1C4.13 1 1 4.13 1 8C1 11.86 4.13 15 8 15C11.86 15 15 11.86 15 8C15 4.13 11.86 1 8 1Z" fill="currentColor" fill-opacity="1.000000" fill-rule="evenodd"/>
 	<mask id="mask_971_59183" fill="white">
 		<path id="形状结合备份" d="M10.6249 10.9999C10.5289 10.9999 10.433 10.9631 10.3597 10.89L8 8.53027L5.64026 10.89C5.56702 10.9631 5.47107 10.9999 5.37512 10.9999C5.27905 10.9999 5.18311 10.9631 5.10999 10.89C4.96338 10.7434 4.96338 10.5065 5.10999 10.3597L7.46973 8L5.10999 5.64026C4.96338 5.49353 4.96338 5.25659 5.10999 5.10999C5.25659 4.96338 5.49353 4.96338 5.64026 5.10999L8 7.46973L10.3597 5.10999C10.5065 4.96338 10.7434 4.96338 10.89 5.10999C11.0366 5.25659 11.0366 5.49353 10.89 5.64026L8.53027 8L10.89 10.3597C11.0366 10.5065 11.0366 10.7434 10.89 10.89C10.8169 10.9631 10.7209 10.9999 10.6249 10.9999Z" clip-rule="evenodd" fill="" fill-opacity="1.000000" fill-rule="evenodd"/>
 	</mask>