diff --git a/docs/demos/anchor/basic-source.vue b/docs/demos/anchor/basic-source.vue
index 1ec6c8c96..82600b2c9 100644
--- a/docs/demos/anchor/basic-source.vue
+++ b/docs/demos/anchor/basic-source.vue
@@ -100,11 +100,12 @@ const items = sections.map((section) => ({
 
 .tip {
   margin: 0;
-  color: #4f647a;
+  color: var(--tr-text-secondary);
   line-height: 1.5;
 }
 
 .article {
+  --anchor-section-active-bg: #b9d7ff;
   display: grid;
   gap: 16px;
   height: 100%;
@@ -112,11 +113,15 @@ const items = sections.map((section) => ({
   padding: 24px 28px;
 }
 
+:global([data-tr-color-mode='dark'] .article) {
+  --anchor-section-active-bg: color-mix(in srgb, #317af7 40%, var(--vp-c-bg));
+}
+
 .article-section {
   padding: 20px 24px;
-  border: 1px solid #eef3f8;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  background: #fff;
+  color: var(--tr-text-secondary);
   scroll-margin-top: 16px;
 }
 
@@ -127,17 +132,17 @@ const items = sections.map((section) => ({
 @keyframes section-active {
   0%,
   25% {
-    background-color: #b9d7ff;
+    background-color: var(--anchor-section-active-bg);
   }
   45% {
-    background-color: #fff;
+    background-color: var(--vp-c-bg);
   }
   65%,
   85% {
-    background-color: #b9d7ff;
+    background-color: var(--anchor-section-active-bg);
   }
   100% {
-    background-color: #fff;
+    background-color: var(--vp-c-bg);
   }
 }
 
diff --git a/docs/demos/anchor/controlled-search.vue b/docs/demos/anchor/controlled-search.vue
index d6c1a170f..a23fd77e2 100644
--- a/docs/demos/anchor/controlled-search.vue
+++ b/docs/demos/anchor/controlled-search.vue
@@ -136,12 +136,19 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => {
 }
 
 .conversation-list {
+  --anchor-bubble-bg: var(--tr-color-primary-light);
+  --anchor-bubble-active-bg: #b9d7ff;
   --tr-bubble-list-gap: 16px;
   --tr-bubble-list-padding: 24px 72px 40px;
   --tr-bubble-max-width: 560px;
   height: 100%;
 }
 
+:global([data-tr-color-mode='dark'] .conversation-list) {
+  --anchor-bubble-bg: color-mix(in srgb, #317af7 30%, var(--tr-container-bg-default));
+  --anchor-bubble-active-bg: color-mix(in srgb, #317af7 40%, var(--tr-container-bg-default));
+}
+
 .nav.is-right {
   right: 16px;
 }
@@ -151,7 +158,7 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => {
 }
 
 :deep(.user-bubble-target) {
-  --tr-bubble-box-bg: var(--tr-color-primary-light);
+  --tr-bubble-box-bg: var(--anchor-bubble-bg);
   scroll-margin-top: 20px;
 }
 
@@ -162,17 +169,17 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => {
 @keyframes user-bubble-active-flash {
   0%,
   25% {
-    background-color: #b9d7ff;
+    background-color: var(--anchor-bubble-active-bg);
   }
   45% {
-    background-color: var(--tr-color-primary-light);
+    background-color: var(--anchor-bubble-bg);
   }
   65%,
   85% {
-    background-color: #b9d7ff;
+    background-color: var(--anchor-bubble-active-bg);
   }
   100% {
-    background-color: var(--tr-color-primary-light);
+    background-color: var(--anchor-bubble-bg);
   }
 }
 </style>
diff --git a/docs/demos/anchor/demo-shell.css b/docs/demos/anchor/demo-shell.css
index d958192f8..84eed0202 100644
--- a/docs/demos/anchor/demo-shell.css
+++ b/docs/demos/anchor/demo-shell.css
@@ -8,7 +8,7 @@
   align-items: center;
   flex-wrap: wrap;
   gap: var(--anchor-demo-controls-gap, 12px 16px);
-  color: var(--anchor-demo-controls-color, #4f647a);
+  color: var(--tr-text-secondary);
   font-size: 13px;
 }
 
@@ -28,7 +28,7 @@
   position: relative;
   height: var(--anchor-demo-stage-height, 420px);
   overflow: hidden;
-  border: 1px solid var(--anchor-demo-stage-border, #dfe7f2);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  background: var(--anchor-demo-stage-bg, #fff);
+  background: var(--tr-container-bg-default);
 }
diff --git a/docs/demos/drag-overlay/basic.vue b/docs/demos/drag-overlay/basic.vue
index 62a6b9c7a..b30bb7848 100644
--- a/docs/demos/drag-overlay/basic.vue
+++ b/docs/demos/drag-overlay/basic.vue
@@ -134,7 +134,7 @@ function handleFilesRejected(rejection: FileRejection) {
 .demo-section {
   margin-bottom: 10px;
   padding: 20px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
 }
 
@@ -152,19 +152,18 @@ function handleFilesRejected(rejection: FileRejection) {
 
 .demo-section h3 {
   margin-top: 0;
-  color: #333;
+  color: var(--vp-c-text-1);
 }
 
 .demo-section p {
-  color: #666;
+  color: var(--vp-c-text-1);
   margin-bottom: 16px;
 }
 
 /* 聊天容器样式 */
 .chat-container {
-  border: 1px solid #ddd;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background: white;
   min-height: 300px;
   display: flex;
   flex-direction: column;
@@ -174,8 +173,7 @@ function handleFilesRejected(rejection: FileRejection) {
 
 .chat-header {
   padding: 12px 16px;
-  background: #f8f9fa;
-  border-bottom: 1px solid #e9ecef;
+  border: 1px solid var(--vp-c-divider);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -183,7 +181,7 @@ function handleFilesRejected(rejection: FileRejection) {
 
 .chat-header h4 {
   margin: 0;
-  color: #333;
+  color: var(--vp-c-text-1);
 }
 
 .drag-indicator {
@@ -213,8 +211,8 @@ function handleFilesRejected(rejection: FileRejection) {
 }
 
 .message-content {
-  background: #f1f3f4;
   padding: 8px 12px;
+  background-color: var(--tr-bubble-box-bg);
   border-radius: 18px;
   display: inline-block;
   max-width: 70%;
@@ -222,7 +220,7 @@ function handleFilesRejected(rejection: FileRejection) {
 
 .chat-input {
   padding: 12px 16px;
-  border-top: 1px solid #e9ecef;
+  border: 1px solid var(--vp-c-divider);
   display: flex;
   gap: 8px;
 }
@@ -230,7 +228,7 @@ function handleFilesRejected(rejection: FileRejection) {
 .chat-input input {
   flex: 1;
   padding: 8px 12px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 20px;
   outline: none;
 }
diff --git a/docs/demos/drag-overlay/custom-overlay.vue b/docs/demos/drag-overlay/custom-overlay.vue
index 29bd424d4..5a4a591e6 100644
--- a/docs/demos/drag-overlay/custom-overlay.vue
+++ b/docs/demos/drag-overlay/custom-overlay.vue
@@ -70,7 +70,7 @@ function handleImageError(rejection: FileRejection) {
 .demo-section {
   margin-bottom: 40px;
   padding: 20px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
 }
 
@@ -86,7 +86,7 @@ function handleImageError(rejection: FileRejection) {
 
 /* 图片上传区域样式 */
 .image-upload-area {
-  border: 2px dashed #ddd;
+  border: 2px dashed var(--vp-c-divider);
   border-radius: 8px;
   min-height: 200px;
   display: flex;
@@ -140,7 +140,7 @@ function handleImageError(rejection: FileRejection) {
   text-align: center;
   color: white;
   padding: 20px;
-  border: 2px dashed white;
+  border: 2px dashed var(--vp-c-divider);
   border-radius: 8px;
 }
 
diff --git a/docs/demos/drag-overlay/disabled.vue b/docs/demos/drag-overlay/disabled.vue
index 83b1e5176..b493c3800 100644
--- a/docs/demos/drag-overlay/disabled.vue
+++ b/docs/demos/drag-overlay/disabled.vue
@@ -23,7 +23,7 @@ import { vDropzone } from '@opentiny/tiny-robot'
 .demo-section {
   margin-bottom: 40px;
   padding: 20px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
 }
 
@@ -39,13 +39,13 @@ import { vDropzone } from '@opentiny/tiny-robot'
 
 /* 禁用状态样式 */
 .disabled-area {
-  border: 2px solid #ccc;
+  border: 2px solid var(--vp-c-divider);
   border-radius: 8px;
   min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f8f9fa;
+  background: var(--vp-c-bg);
 }
 
 .disabled-area.disabled {
diff --git a/packages/components/src/styles/components/anchor.less b/packages/components/src/styles/components/anchor.less
index 4d77b0d34..b713c14dd 100644
--- a/packages/components/src/styles/components/anchor.less
+++ b/packages/components/src/styles/components/anchor.less
@@ -10,21 +10,13 @@
     marker-height: 4px;
     marker-radius: 64px;
     marker-track-size: 8px;
-    bg: var(--tr-container-bg-default);
-    border: color-mix(in srgb, var(--tr-border-color-default) 32%, transparent);
-    shadow: var(--tr-shadow-sm);
-    item-color: var(--tr-text-secondary);
     item-color-active: var(--tr-color-primary);
     item-bg-hover: var(--tr-container-bg-hover);
     item-label-font-size: var(--tr-font-size-sm);
     item-label-font-weight: var(--tr-font-weight-regular);
     item-label-line-height: 24px;
     item-label-letter-spacing: 0px;
-    marker-color: color-mix(in srgb, var(--tr-text-tertiary) 50%, transparent);
     marker-color-active: var(--tr-color-primary);
-    tooltip-bg: var(--tr-container-bg-default);
-    tooltip-color: var(--tr-text-primary);
-    tooltip-shadow: var(--tr-shadow-sm);
     search-bg: var(--tr-container-bg-default);
     search-color: var(--tr-text-primary);
     search-border: color-mix(in srgb, var(--tr-border-color-default) 42%, transparent);
diff --git a/packages/components/src/styles/variables.css b/packages/components/src/styles/variables.css
index 5e1b83b15..7f23bc935 100644
--- a/packages/components/src/styles/variables.css
+++ b/packages/components/src/styles/variables.css
@@ -109,6 +109,16 @@
   --tr-container-bg-active: rgba(0, 0, 0, 0.15);
   --tr-container-bg-disabled: rgba(0, 0, 0, 0.04);
 
+  /* ===== Anchor ===== */
+  --tr-anchor-bg: #ffffff;
+  --tr-anchor-border: transparent;
+  --tr-anchor-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --tr-anchor-item-color: var(--tr-text-primary);
+  --tr-anchor-marker-color: var(--tr-text-disabled);
+  --tr-anchor-tooltip-bg: #ffffff;
+  --tr-anchor-tooltip-color: var(--tr-text-primary);
+  --tr-anchor-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+
   /* ===== MCP Server Picker ===== */
   --tr-mcp-server-picker-bg-default: #ffffff;
   --tr-mcp-server-picker-bg-default-2: #ffffff;
@@ -234,6 +244,16 @@
   --tr-container-bg-active: rgba(255, 255, 255, 0.15);
   --tr-container-bg-disabled: rgba(255, 255, 255, 0.06);
 
+  /* ===== Anchor ===== */
+  --tr-anchor-bg: #333333;
+  --tr-anchor-border: transparent;
+  --tr-anchor-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --tr-anchor-item-color: var(--tr-text-primary);
+  --tr-anchor-marker-color: var(--tr-text-secondary);
+  --tr-anchor-tooltip-bg: #484848;
+  --tr-anchor-tooltip-color: var(--tr-text-primary);
+  --tr-anchor-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+
   /* ===== 阴影系统 ===== */
   --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);