diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index b22e5a20..ea0d602a 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
     <Icon iconName="spinner" size="sm" />
   </div>
   <div ref="traceGraph" class="d3-graph"></div>
-  <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
+  <el-dialog v-model="showDetail" :destroy-on-close="true" @closed="showDetail = false">
     <SpanDetail :currentSpan="currentSpan" />
   </el-dialog>
 </template>
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 727416f9..67e608e6 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -87,7 +87,7 @@ limitations under the License. -->
       {{ t("relatedTraceLogs") }}
     </el-button>
   </div>
-  <el-dialog v-model="showEventDetail" :destroy-on-close="true" fullscreen @closed="showEventDetail = false">
+  <el-dialog v-model="showEventDetail" :destroy-on-close="true" @closed="showEventDetail = false">
     <div>
       <div class="mb-10">
         <span class="grey title">Name:</span>
@@ -115,7 +115,7 @@ limitations under the License. -->
       </div>
     </div>
   </el-dialog>
-  <el-dialog v-model="showRelatedLogs" :destroy-on-close="true" fullscreen @closed="showRelatedLogs = false">
+  <el-dialog v-model="showRelatedLogs" :destroy-on-close="true" @closed="showRelatedLogs = false">
     <el-pagination
       v-model="pageNum"
       :page-size="pageSize"
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index 20f072e2..518d1a1f 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -31,8 +31,10 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import * as d3 from "d3";
+  import { useAppStoreWithOut } from "@/store/modules/app";
   import type { Span } from "@/types/trace";
   import Graph from "./D3Graph/Index.vue";
+  import { Themes } from "@/constants/data";
 
   /* global defineProps, Recordable*/
   const props = defineProps({
@@ -40,6 +42,7 @@ limitations under the License. -->
     traceId: { type: String, default: "" },
   });
   const { t } = useI18n();
+  const appStore = useAppStoreWithOut();
   const list = computed(() => Array.from(new Set(props.data.map((i: Span) => i.serviceCode))));
 
   function computedScale(i: number) {
@@ -58,7 +61,7 @@ limitations under the License. -->
     const context: any = canvas.getContext("2d");
     canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth;
     canvas.height = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientHeight;
-    context.fillStyle = "#fff";
+    context.fillStyle = appStore.theme === Themes.Dark ? "#212224" : `#fff`;
     context.fillRect(0, 0, canvas.width, canvas.height);
     const image = new Image();
     image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`;
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index ccf27a13..363914b4 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -246,7 +246,7 @@ export default class ListGraph {
       })
       .attr("cy", -5)
       .attr("fill", "none")
-      .attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66")
+      .attr("stroke", "#e66")
       .style("opacity", (d: Recordable) => {
         const events = d.data.attachedEvents;
         if (events && events.length) {
@@ -259,7 +259,7 @@ export default class ListGraph {
       .append("text")
       .attr("x", 267)
       .attr("y", -1)
-      .attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66")
+      .attr("fill", "#e66")
       .style("font-size", "10px")
       .text((d: Recordable) => {
         const events = d.data.attachedEvents;