diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
index 8baeccc..959a6cd 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@@ -1754,7 +1754,7 @@ defineExpose({
   height: 120px;
   width: 392px;
   border-radius: 4px;
-  border: 1px solid var(--deCardStrokeColor, #dee0e3);
+  border: 1px solid var(--deCardStrokeColor, #434343);
   border-radius: 4px;
   margin: 0 0 16px 16px;
   padding: 16px;
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index 8ba596a..7466f42 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -2116,7 +2116,7 @@ const getMenuList = (val: boolean) => {
     width: calc(50% - 16px);
     height: 140px;
     border-radius: 4px;
-    border: 1px solid var(--deCardStrokeColor, #dee0e3);
+    border: 1px solid var(--deCardStrokeColor, #434343);
     border-radius: 4px;
     margin: 0 0 16px 16px;
     padding: 16px;
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
index 4164dc5..9d0fba2 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
@@ -1777,7 +1777,7 @@ defineExpose({
     display: flex;
     font-size: 14px;
     font-weight: 400;
-
+    color: #ffffff;
     :nth-child(1) {
       width: 120px;
     }
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/index.vue b/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
index 4f6d94d..5a3a74a 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
@@ -1667,7 +1667,7 @@ const getMenuList = (val: boolean) => {
                 <el-row>
                   <el-col :span="19">
                     <span class="name">
-                      <span class="ellipsis" :title="api.name">{{ api.name }}</span>
+                      <span style="color: #B8BCBF;" class="ellipsis" :title="api.name">{{ api.name }}</span>
                     </span>
                     <span v-if="api.status === 'Error'" class="de-tag error-color">{{
                       t('datasource.invalid')
@@ -1687,7 +1687,7 @@ const getMenuList = (val: boolean) => {
                   </el-col>
                 </el-row>
                 <div>
-                  {{ t('data_source.data_time') }} {{ timestampFormatDate(api['updateTime']) }}
+                  <span style="color: #B8BCBF;">{{ t('data_source.data_time') }}</span> {{ timestampFormatDate(api['updateTime']) }}
                 </div>
 
                 <div class="req-title">
@@ -2096,13 +2096,14 @@ const getMenuList = (val: boolean) => {
     flex-wrap: wrap;
     margin-top: 16px;
     margin-left: -16px;
+    color: #ffffff;
   }
 
   .api-card {
     width: calc(50% - 16px);
     height: 140px;
     border-radius: 4px;
-    border: 1px solid var(--deCardStrokeColor, #dee0e3);
+    border: 1px solid var(--deCardStrokeColor, #434343);
     border-radius: 4px;
     margin: 0 0 16px 16px;
     padding: 16px;
@@ -2132,11 +2133,11 @@ const getMenuList = (val: boolean) => {
       }
     }
     .req-title {
-      color: var(--deTextSecondary, #646a73);
+      color: var(--deTextSecondary, #B8BCBF);
       margin: 16px 0 4px 0;
     }
     .req-value {
-      color: var(--deTextPrimary, #1f2329);
+      color: var(--deTextPrimary, #ffffff);
     }
     .de-copy-icon {
       cursor: pointer;